简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
安装：
全局安装 gulp：
$ npm install --global gulp
作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
本地安装:npm install gulp
Api:
使用gulp，仅需知道4个API即可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch()
//使用数组的方式来匹配多种文件 gulp.src(['js/*.js','css/*.css','*.html'])
gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件 gulp.src(['!b*.js',*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
文件复制：gulp.task('copy',function(){
gulp.src('./script/*.js').pipe(gulp.dest('./dist/script'))
})
gulp.task(name[, deps], fn)
name 为任务名
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务 // Do something });
插件
重命名gulp-rename
安装：npm install gulp-name
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('copyRename',function(){
gulp.src('./script/*.js')
.pipe(rename('rename.js'))
.pipe(gulp.dest('./dist/script'))
})
js压缩 gulp-uglify
安装：npm install gulp-uglify
var gulp = require('gulp'), uglify = require("gulp-uglify"); gulp.task('minify-js', function () { gulp.src('js/*.js') // 要压缩的js文件 .pipe(uglify()) //使用uglify进行压缩,更多配置请参考： .pipe(gulp.dest('dist/js')); //压缩后的路径 });
css压缩 gulp-minify-css
安装：npm install gulp-minify-css
gulp.task('minifyCSS',function(){
gulp.src('./css/*.css')
.pipe(minifyCss())
.pipe(rename('change.css'))
.pipe(gulp.dest('./dist/css/minify'));
});
html 压缩 gulp-minify-html
安装：npm install gulp-minify-html
var gulp = require('gulp'), minifyHtml = require("gulp-minify-html"); gulp.task('minify-html', function () { gulp.src('html/*.html') // 要压缩的html文件 .pipe(minifyHtml()) //压缩 .pipe(gulp.dest('dist/html')); });
html 压缩 gulp-minify-html
var gulp = require('gulp'), minifyHtml = require("gulp-minify-html"); gulp.task('minify-html', function () { gulp.src('html/*.html') // 要压缩的html文件 .pipe(minifyHtml()) //压缩 .pipe(gulp.dest('dist/html')); });
文件合并
安装：npm install gulp-concat
gulp-concat 用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了
var concat = require("gulp-concat");
gulp.task('concat',function(){
gulp.src('./script/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/script/concat'));
})
图片压缩
安装：npm install gulp-imagemin
gulp.task('imagemin',function(){
gulp.src('./img/3.jpg')
.pipe(imagemin())
.pipe(rename('minify.jpg'))
.pipe(gulp.dest('./img/minify'));
})
可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。
精灵整合
安装：
npm install gulp.spritesmith
gulp.task('sprite',function(){
gulp.src(['./img/*.png'])
.pipe(spritesmith({
imgName:'sprite.png',
cssName:'sprite.css'
}))
.pipe(gulp.dest('./dist/sprites'));
})
与gulp类似的前端构建工具
Grunt
webpack
fis3