GULP 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
常用的gulp插件：
sass 的编译（ gulp-sass）
less 编译 （ gulp-less）
重命名（ gulp-rename）
自动添加 css 前缀（ gulp-autoprefixer）
压缩 css（ gulp-clean-css）
js 代码校验（ gulp-jshint）
合并 js 文件（ gulp-concat）
压缩 js 代码（ gulp-uglify）
压缩图片（ gulp-imagemin）
自动刷新页面（ gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装 livereload 插件）
图片缓存，只有图片替换了才压缩（ gulp-cache）
更改提醒（ gulp-notify）
插件使用
下面介绍gulp中的插件，
gulp-less插件
1、先在本地下载插件
cnpm install gulp-less --save-dev
2、在入口js文件（gulpfile.js或者index.js）中，写代码（任务代码）
var g = require("gulp");
var gxx = require("gulp-xxxx");
g.task("任务名",function() {
g.src("目标路径")
.pipe(插件方法，如test_less())
.pipe(g.dest("任务完成后的路径"));
});
gulp-htmlmin插件
安装命令：cnpm install gulp-htmlmin --save-dev
var gulp = require("gulp");
var gulp_htmlmin = require("gulp-htmlmin");
var minjs = require('gulp-uglify');//autoprefixer插件模块
gulp.task("test-htmlmin",function(){
var options = {
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true
};
gulp.src("src/*.html")
.pipe(gulp_htmlmin(options))
.pipe(gulp.dest("dist/"))
});
gulp-minify-css插件
安装命令：cnpm install gulp-minify-css --save-dev
var cssmin_minify = require('gulp-minify-css');
gulp.task("test-minify",function(){
gulp.src("src/css/*.css")
.pipe(cssmin_minify({
advanced: false,
compatibility: 'ie7',
keepBreaks: false,
keepSpecialComments: '*'
}))
.pipe(gulp.dest("dist/css/"))
});
gulp-sass插件
安装命令：npm install –save-dev gulp-sass
var gulp = require('gulp'),
sass = require("gulp-sass");
gulp.task('test-sass', function () {
gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
gulp-uglify插件
安装命令： cnpm install gulp-uglify --save-dev
var minjs = require('gulp-uglify');
gulp.task('jsmin', function () {
gulp.src(['src/js/address.js','src/js/cart.js','src/js/detail.js','src/js/index.js'])
//多个文件以数组形式传入
.pipe(minjs())
.pipe(gulp.dest('dest/js'));
});
