Gulp常用插件整理（压缩、兼容、时间戳、优化、hash等）

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

1.gulp-clean
删除文件/文件夹

npm install gulp-clean --save-dev

var gulp = require('gulp');var clean = require('gulp-clean');gulp.task('clean',function(){    return gulp.src('./public/dist',{read:false}).pipe(clean());});

2.gulp-concat
合并js文件，可以合并多个js文件为一个文件，减少服务器请求。

npm install gulp-concat --save-dev

var concat = require('gulp-concat');gulp.task('scripts', function() {    return gulp.src('src/js/*.js')    .pipe(concat('all.js'))    .pipe(gulp.dest('dist/'));});

3.gulp-uglify
对js文件进行压缩，有人叫这个作“丑化”，确实挺丑的

npm install gulp-uglify --save-dev

var uglify = require('gulp-uglify');gulp.task('uglify ',function(){    gulp.src('src/js/*.js')    .pipe(uglify())    .pipe(gulp.dest('dist/'));});

4.css合并插件gulp-concat-css
css合并插件，合并多个css文件为一个文件，减少网页对服务器的请求数，提供网页响应速度。

npm install gulp-concat-css --save-dev

var concatCss = require('gulp-concat-css');gulp.task('concatCss ', function () {    return gulp.src('src/**/*.css')    .pipe(concatCss("index.css"))    .pipe(gulp.dest('dist/'));});

5.css压缩插件 gulp-minify-css
压缩css文件

npm install gulp-minify-css --save-dev

var minifyCSS = require('gulp-minify-css');gulp.task('minifyCSS ', function() {    return gulp.src('src/css/*.css')    .pipe(minifyCSS())    .pipe(gulp.dest('dist/'));});

6.gulp-autoprefixer
增加浏览器的私有前缀，让你不用再考虑为了写浏览器的兼容前缀而头疼。

npm install   gulp-autoprefixer  --save-dev

var autoprefixer= require('gulp-autoprefixer');gulp.task('autoprefixer', function () {    gulp.src('src/css/*.css')        .pipe(autoprefixer({            cascade: true,             remove:true         }))        .pipe(gulp.dest('dist/css'));});

7.gulp-htmlmin

html文件压缩插件

npm install gulp-htmlmin --save-dev

var htmlmin = require('gulp-htmlmin');gulp.task('htmlmin', function() {    gulp.src('src/*.html')    .pipe(htmlmin({collapseWhitespace: true}))    .pipe(gulp.dest('dist/'));});

8. gulp-imagemin
图片压缩插件。
npm install gulp-imagemin–save-dev

var imagemin = require('gulp-imagemin');gulp.task('imagemin', function(){    gulp.src('src/images/*')    .pipe(imagemin())    .pipe(gulp.dest('dist/images'));});

9.gulp-rename
修改文件的名字。

npm install gulp-rename --save-dev

var rename = require('rename');gulp.task('rename', function(){    gulp.src('src/css/base.css')    .pipe(rename('main.css'))    .pipe(gulp.dest('src/css/'));});

10.gulp-jshint
检查javascript代码中的错误

npm install gulp-jshint --save-dev

var jshint = require('gulp-jshint');gulp.task('jshint',function(){    gulp.src('src/js/*.js')    .pipe(jshint())    .pipe(jshint.reporter());});

11.gulp-csslint
检查css的语法错误

npm install gulp-csslint --save-dev

var csslint = require('gulp-csslint');gulp.task('csslint', function() {    gulp.src('src/css/*.css')    .pipe(csslint())    .pipe(csslint.reporter());});

12.gulp-csscomb
格式化css代码，美化css代码，更容易阅读。

npm install gulp-csscomb --save-dev

var csscomb = require('gulp-csscomb');gulp.task('csscomb', function() {    gulp.src('src/css/main.css')    .pipe(csscomb())    .pipe(gulp.dest('dist/css'));});

13.gulp-rev-collector
HTML PHP JSON 路径替换

npm install gulp-rev-collector --save-dev

var revCollector = require('gulp-rev-collector');  gulp.task('revCollector ', function() {    gulp.src(['./public/dist/rev/*.json', './resources/views/web/**/*.php'])           .pipe(revCollector({            replaceReved:true        }))                                          .pipe(gulp.dest('./resources/views/web/')); });

14.gulp-rev
给文件后添加md5时间戳

npm install gulp-rev --save-dev

var rev = require('gulp-rev'); gulp.task('rev',function(){    gulp.src(['./public/js/*.js','./public/js/common/*.js'])    .pipe(jshint())    .pipe(uglify())    .pipe(rev())    .pipe(gulp.dest('./public/dist/js'))    .pipe(rev.manifest())    .pipe(gulp.dest('./public/dist/dev'))});