工作中对于工程的构建往往习惯于使用Gulp，Gulp有许多插件辅助其工作。下面就是对这些插件的一个总结，方便在以后的使用中方便查找。
gulp
安装：
npm install gulp --save-devgulp-minify-css - 压缩CSS
安装：
npm install gulp-minify-css --save-dev使用：
var minifyCss = require('gulp-minify-css')
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(minifycss());
});gulp-jshint - 语法检查
安装：
npm install gulp-jshint --save-dev使用：
var minifyCss = require('gulp-jshint')
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'));
});我们需要指定JSHint一个reporter。这裡我使用预设的reporter，适用于大多数人。更多有关此设定，你可以在JSHint网站取得。
gulp-uglify - 丑化，压缩js
安装：
npm install gulp-uglify --save-dev使用：
var uglify = require('gulp-uglify')
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(uglify());
});gulp-rename - 重命名
安装：
npm install gulp-rename --save-dev使用：
var rename = require('gulp-rename')
gulp.task('styles', function() {
return gulp.src('src/styles/main.css')
.pipe(rename({suffix: '.min'}))；
});gulp-clean － 清理文件
安装：
npm install gulp-clean --save-dev使用：
var clean = require('gulp-clean')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'],{read: false})
.pipe(clean());
});因为我们不想要读取已经被删除的档案，我们可以加入read: false选项来防止gulp读取档案内容–让它快一些。
gulp-concat - 拼接
安装：
npm install gulp-concat --save-dev使用：
var concat = require('gulp-concat')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'],{read: false})
.pipe(concat('main.js'));
});gulp-less - 编译less
安装：
npm install gulp-less --save-dev使用：
var less = require('gulp-less')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(less());
});gulp-ruby-sass － 编译sass
安装：
npm install gulp-ruby-sass --save-dev使用：
var sass = require('gulp-ruby-sass')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(sass({ style: 'expanded' }));
});gulp-autoprefixer － 前缀
安装：
npm install gulp-ruby-sass --save-dev使用：
var autoprefixer = require('gulp-autoprefixer')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: true, //是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认：true
}))
});gulp-imagemin － 图片压缩
安装：
npm install gulp-imagemin --save-dev
npm install gulp-cache --save-dev使用：
var imagemin = require('gulp-imagemin')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
});这会将对所有来源图片进行imagemin处理。我们可以稍微更进一步，利用快取保存已经压缩过的图片，以便每次进行此任务时不需要再重新压缩。这裡只需要gulp-cache外挂–稍早已经安装。我们需要额外设置才能使用这个外挂，因此修改这段程式码:
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
});gulp-notify - 报错
安装：
npm install gulp-notify --save-dev使用：
var notify = require('gulp-notify')
gulp.task('styles', function() {
return gulp.src(['src/styles/main.css'])
.pipe(notify({ message: 'Images task complete' }));
});gulp-cache
安装：
npm install gulp-cache --save-dev使用：
配合gulp-imagemin使用
gulp-livereload － 即时重整
第一步
安装：
npm install gulp-livereload --save-dev使用：
// 建立即时重整伺服器
var server = livereload();
// 看守所有位在 dist/ 目录下的档案，一旦有更动，便进行重整
gulp.watch(['dist/**']).on('change', function(file) {
server.changed(file.path);
});第二步：安装 chrome 插件。点我就去安装
此时，你会发现当你修改 app 文件夹下的任何文件，命令行都会有内容输出，说明能够监控到文件的变化，运作正常了。
第三步： 以服务器的方式打开页面，例如 localhost:3000，而不是 file:///F:/web/app/index.html 接着点击刚刚安装的 chrome插件 ，中间变为实心黑色圆点表示开始运作了。
browser-sync － 浏览器自动刷新
安装：
npm install rowser-sync --save-dev使用：
var browserSync = require('browser-sync');
gulp.task('watch', function() {
gulp.watch('app/*.html', ['html', browserSync.reload]);
});
gulp.task('default', ['watch'], function() {
browserSync({
server: {
baseDir: “项目根目录”
}
});
});browserify － 组件管理
安装：
npm install browserify --save-dev使用：
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
browserify()
.require(dependencies)
.bundle()
.pipe(source('lib.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest(jsPath));
browserify({
entries: './app/js/index.js',
extensions: ['.js', '.jsx']
}).external(dependencies)
.transform(reactify)
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest(jsPath));