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'))
});