glup前端代码打包的使用

简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。使用她可以大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

1、使用gulp的方法：

第一步：安装node.js

gulp是基于nodejs，所以需要安装nodejs

第二步：命令行

node -v查看安装的nodejs版本，出现版本号说明刚才安装成功，不然需要进行重新的安装。

npm -v 查看npm的版本号，npm是在安装nodejs的时候一同进行安装的

cd 定位到目录，需要进行代码打包的根目录下其实就定位到，项目的根目录

第三步：npm 介绍

npm install cnpm -g --registry=https://registry.npm.taobao.org  安装npm

第四步：全局安装gulp：

cnpm install gulp -g 进行gulp的安装

gulp -v 查看gulp的版本号

第五步：本地安装gulp插件

安装：定位目录命令后提示符执行

cnpm install --save-dev

；

本示例以gulp-less为例（编译less文件），命令提示符执行

cnpm install gulp-less --save-dev

；



7将会安装在node_modules的gulp-less目录下，该目录下有一个gulp-less的使用帮助文档README.md；

为了能正常使用，我们还得本地安装gulp：

cnpm install gulp --save-dev

；

PS：细心的你可能会发现，我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

第六步、新建gulpfile.js文件（重要）

//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 less = require('gulp-less');//压缩的是less文件 //定义一个testLess任务（自定义任务名称），压缩的是less文件 gulp.task('testLess', function () { gulp.src('src/less/index.less') //该任务针对的文件 .pipe(less()) //该任务调用的模块 .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css }); var uglify = require("gulp-uglify");//压缩的是js文件 var minifyCss = require("gulp-minify-css");//压缩的是css文件 var minifyHtml = require("gulp-minify-html");//压缩的是html文件 var imagemin = require('gulp-imagemin');////压缩的是图片文件 gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务 //gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数 //gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组) //gulp.dest(path[, options]) 处理完后文件生成路径 第七步 进行打包： 在进行nodejs安装的时候，使用npm run 命令 可以查看目前的所有命令。 从而进行打包使用，如果使用 gulp all是使用全局安装进行打包；如果使用 npm run +查看出来的命令则是使用本地打包如 进行命令 npm　run +start/all 均是可以进行项目的打包