简介
gulp是前端开发过程中对代码进行自动化构建的工具，它不仅能对网站资源进行优化，而且在开发过程中能避免很多重复的工作，比如对相关文件的操作，还有自动监视一些文件的变化等功能。
构建流程
Node.js安装
gulp是基于Node开发环境运行的，所以需要使用npm的包管理工具去安装它。要使用npm，就必须安装Node.js，可前往Node.js的官网下载：
下载并安装完成后，运行Node.js command prompt并输入命令：
node -v // 出现版本号即为node安装成功
npm -v // 出现版本号即为npm安装成功
gulp安装
安装好Node.js之后，接着在Node.js command prompt中输入命令：
npm install -g gulp
// 全局安装gulp，”-g”代表全局
gulp -v
// 出现版本号即为gulp安装成功
cd 项目根目录所在位置
// 进入到项目根目录
npm init
// 初始化项目，之后是一连串的信息填写，最后生成package.json
npm install gulp --save-dev
// 项目安装gulp依赖
// --save的作用是将配置信息保存至package.json文件中
// -dev的作用是保存至package.json中的devDependencies对象内，不指定则会保存到dependencies对象中
如果对于前端自动化构建工具熟悉的朋友应该知道，package.json定义了项目所需要的各种模块，以及项目的配置信息，接下来我主要对这个文件的内容进行介绍（PS：规范的package.json不能出现注释）：
{
"name": "test", //项目名称
"version": "1.0.0", //项目版本
"description": "This is my first gulp project !", //项目描述
"homepage": "index.js", //项目主页
"repository": {
"type": "git", //仓库类型
"url": "https://git.oschina.net/xxxx" //仓库地址
},
"scripts": {
"dev": "cross-env NODE_ENV=dev gulp dev",
"build": "cross-env NODE_ENV=production gulp build"
},
"author": {
"name": "alolonghun", //作者名
"email": "906268297@qq.com" //作者邮箱
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目开发环境依赖的插件
"gulp": "^3.9.1",
"gulp-less": "^3.3.2",
"gulp-sass": "^3.1.0",
"cross-env": "^5.0.5",
"del": "^3.0.0",
"gulp-concat": "^2.6.1",
"gulp-uglify": "^3.0.0",
"webpack": "^3.5.5"
},
"dependencies": { //项目生产环境依赖的插件
...
}
}
如果对于package.json文件还有什么不理解的，可以输入以下命令获取帮助：
npm help package.json
相关依赖插件的安装
依然在Node.js command prompt中操作：
npm install gulp-less cross-env del gulp-concat gulp-uglify webpack --save-dev
//一次性可安装多个依赖插件
这里要注意一下：
由于网络原因，gulp-sass的安装比较特殊，可能会安装失败，因为安装过程中部分细节会到亚马逊云服务器上获取文件，获取失败则安装不了。
详细安装过程如下：
执行安装gulp-sass命令，这个过程中会先安装 node-sass ，因为 gulp-sass 依赖于 node-sass 。中间出现的错误信息类似下面这条：
Cannot download https://github.com/sass/node-sass/releases/download/v3.4.2/win32-x64-46_bind
现象是这些二进制文件使用了GitHub的lfs 服务，而lfs使用的是亚马逊云，由于网络原因，这些服务器无法访问。
解决方法有以下三种：
方法一：进入项目根目录，执行命令（最简单的方法）：
npm install --save-dev gulp-sass@latest
方法二：首先全局环境下配置淘宝镜像（PS：这里是全局环境，不是项目根目录）
执行语句：npm install -g cnpm --registry=https://registry.npm.taobao.org
然后进入项目根目录，执行语句：cnpm install --save-dev node-sass
仍然是项目根目录，执行语句： npm install --save-dev gulp-sass
方法三：下载源码，然后自己编译一个二进制文件或翻墙下载一个官方的二进制文件，来解决该文件的下载问题，之后就能顺利安装gulp-sass了。
可参考：http://blog.csdn.net/jimmyhandy/article/details/50723174
编写gulpfile.js文件
gulpfile.js是gulp项目的配置文件，负责配置编译打包等相关任务，gulpfile.js类似JS的语法，也支持ES6，具体可参照gulp.js官网的语法：
这里简单介绍一下gulpfile.js：
// 使用 require('node_modules里对应模块') 的语法
// 引入gulp
var gulp = require('gulp');
//导入相关插件包
var less = require('gulp-less'),
sass = require('gulp-sass'),
minifycss = require('gulp-minify-css'),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
del = require("del");
// "./src/a.js"：当前目录中src目录下的a.js文件;
// "*"：匹配所有文件 例：src/*.js(包含src下的所有js文件);
// "**"：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件);
// "{}"：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);
// "!"：排除文件 例：!src/a.js(不包含src下的a.js文件);
var src = {
images: './src/**/*.{png,jpg,jpeg,svg}',
js: './src/**/*.js',
less: './src/**/*.less',
scss: './src/**/*.scss'
};
// gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
// gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组)
// gulp.dest(path[, options]) 处理完后文件生成路径
// gulp.watch(glob[, opts], tasks) 监视文件，并且可以在文件发生改动时候做一些事情。
// 注意：gulp.run()方法已被废弃
// 创建一个"clean"任务，作用是在编译文件之前清空dist目录下的文件
gulp.task('clean', function(cb) {
return del([
'./dist/**/*'
], cb);
});
// sass 任务会编译scss文件，并把编译完成的css文件保存到指定目录中
gulp.task('sass',function () {
gulp.src(src.scss)
.pipe(sass({outputStyle: 'compact'})) //sass转css
.pipe(minifycss()) //压缩css
.pipe(gulp.dest("./dist/css")); //输出到./dist/css目录下
});
// 同上，创建一个名为"less"的任务
gulp.task(less', function () {
gulp.src(src.less)
.pipe(less()) //less转css
.pipe(minifycss()) //压缩css
.pipe(gulp.dest('./dist/css')); //输出到./dist/css目录下
});
// 合并，压缩文件
// scripts任务会合并所有js文件，压缩合并后的文件，输出到dist目录。
gulp.task('scripts',function () {
gulp.src(src.js)
.pipe(concat('index.js')) //合并所有js文件到index.js
.pipe(uglify()) //压缩合并后的文件
.pipe(gulp.dest("./dist")) //输出到dist目录下
});
//创建dev任务
gulp.task('dev',function(){
// 监听文件变化
gulp.watch("src/**/*", ['sass', 'less', 'scripts']);
});
//创建build任务，关联和运行上面定义的任务
gulp.task('build', ['sass', 'less', 'scripts']);
程序运行及打包
运行命令：npm run dev
打包命令：npm run build
