gulp常见插件介绍及使用说明汇总（一）

gulp常见的插件有不少，下面是个人收集的一些常用的gulp插件，并简单介绍了他们的使用方法。

一、gulp常见插件介绍及使用方法

在我们使用插件前，首先要安装好插件，用如下命令:

npm install --save-dev pluginName

pluginName：具体插件名字

然后在gulpfile.js中，require插件，如：

 var gulp = require('gulp'),  
     htmlmin = require('gulp-htmlmin');

1、重命名文件插件gulp-rename

这个插件是用来命名文件的，示例代码就不多写了，其他的一些插件示例代码就有用到它，关于它更详细的说明，你可以查看下面链接。
 gulp-rename插件使用详情
2、HTML压缩处理插件gulp-htmlmin 

gulp-htmlmin压缩html是为了减少的大小，清除没用的代码，删除注释代码，压缩页面的js、css，删除多余属性等操作。示例代码：

// html压缩处理
gulp.task("minifyHtml",function(){
	var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('src/index.html')
	.pipe(minhtml(options))
	.pipe(gulp.dest('dist/html'));
});

更多详情可以查看如下链接：

 3、css压缩插件gulp-clean-css

gulp-clean-css插件是优化压缩css文件大小的，示例代码如下：

//css压缩1
gulp.task('mincss',function(){
    var css="src/css/*.css";
    gulp.src(css)
    .pipe(rename({suffix: '.min'})) //重命名css文件
    .pipe(mincss())
    .pipe(gulp.dest("dist/css"))
});
//css压缩2
gulp.task('minifycss',function(){
    var css="src/css/*.css";
    var options={                  //优化的参数
    	compatibility: 'ie7',
    	keepSpecialComments: '*'
    };
    gulp.src(css)
    .pipe(mincss(options))         
    .pipe(gulp.dest("dist/css"))
});

4、图片压缩插件gulp-imagemin

这个插件可以对png、jpeg、gif和svg图像进行压缩，示例代码：
基本使用：

// 图片处理1
gulp.task('minimg',function(){
	var src='src/images/*',
	    dst='dist/images';
	    gulp.src(src)
	    .pipe(imagemin())
	    .pipe(gulp.dest(dst))
});

// 图片处理2
gulp.task('minifyimg',function(){
	var imgsrc='src/images/*',
	    dst='dist/images';
	var options={
	    optimizationLevel: 6, //优化等级，（取值范围：0-7）默认为：3  
        progressive: true, //无损压缩jpg图片，默认为：false 
        interlaced: true, //隔行扫描gif进行渲染，默认为：false 
        multipass: true //多次优化svg直到完全优化，默认为：false 
	};
    gulp.src(imgsrc)
    .pipe(cache(imagemin(options)))  //cache的使用
    .pipe(gulp.dest(dst))
});

利用gulp-cache插件可以快取保存已经压缩过的图片，也就是说没有修改过的图片不压缩，直接从缓存文件中读取，以便每次进行此任务时不需要再重新压缩，只压缩修改的图片。

5、js语法检测gulp-jshint、js压缩插件gulp-uglify、合并文件gulp-concat

5.1、gulp-jshint对javascript文件进行语法检查。

可以参考下面文章和api：
      相关参数说明可以查看
      gulp-jshint使用说明
      shint在gulp中的使用 

5.2、gulp-uglify可以压缩javascript文件，减小文件大小。示例代码：

//js压缩
gulp.task('minjs',function(){
	gulp.src('src/js/lib/require.js')
	.pipe(uglify({
        preserveComments: 'all' 
	}))
	.pipe(gulp.dest('dist/js/lib'))
});

 gulp-uglify参数说明：
        mangle：是否修改变量名，默认值为：true       
        compress：是否完全压缩，默认值为：true  
        preserveComments： 保留注释方式，“all”，保留所有注释。
        gulp-uglify更多详细参数
5.3、gulp-concat合并文件

可以把多个文件合并为一个文件，比如合并js等文件，从而可以减少页面的请求数。

更多gulp-concat插件详细参数

下面是综合示例代码：

//js检查拼接及压缩
gulp.task('concatjs', function() {  
  return gulp.src('src/js/mod/*.js')    
    .pipe(jshint())                     //js语法检查 
    .pipe(jshint.reporter('default'))  // 对代码进行报错提示                                
    .pipe(concat('main.js'))            //合并所有js到main.js
    .pipe(gulp.dest('dist/js'))         //输出main.js到文件夹
    .pipe(rename({suffix: '.min'}))     //重命名压缩后的main.js
    .pipe(uglify())                     //压缩
    .pipe(gulp.dest('dist/js'));        //输出为main.min.js
});

6、来源地图插件gulp-sourcemaps 

  这是个非常有用的插件，我们在压缩、合并等操作之后，调试时所看到的内容，都是编译后的代码。这样就导致一个问题，调试过程中无法和源码（编译时的代码）位置相对应，让调试变的十分困难。

  而sourcemaps作用，便是成一个 .map 文件，里面储存着对应的源码位置。并内嵌在你转换后的文件底部 /*# sourceMappingURL=maps/filename.css.map */。这样在我们调试时，就会直接显示（映射）源码，而不时编译后的代码。实例代码：

gulp.task('javascript', function() {
   return gulp.src(['src/js/*.js','!*.min.js']) // 指明源文件路径、并进行文件匹配，排除 .min.js 后缀的文件
    .pipe(sourcemaps.init()) // 执行sourcemaps
    .pipe(rename({ suffix: '.min' })) // 重命名
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
    .pipe(sourcemaps.write('src/maps')) // 地图输出路径（存放位置）
    .pipe(gulp.dest('dist/js')); // 输出路径
});

 gulp-changed插件能够实现只编译或打包改变过的文件，因为它会把文件进行对比，如果文件没有改动过，则跳过后续任务，大大加快了gulp task的执行速度。

gulp.task('images', function(){
  return gulp.src('src/images/*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
    .pipe(changed('dist/images'))  // 对比文件是否有过改动（此处填写的路径和输出路径保持一致）
    .pipe(imagemin({
      progressive: true,         // 无损压缩JPG图片
      svgoPlugins: [{removeViewBox: false}] // 不移除svg的viewbox属性
    }))
    .pipe(gulp.dest('dist/images')); // 输出路径
});

此时，在我们的dist/images文件下，只对修改过的图片做了处理，没有修改过的图片最后日期还是原先的。

gulp-changed更多详细使用方法

8、文件清理插件gulp-clean 

简单的说，就是一键删除文件。就拿为了调试所生成的 .map 文件为例，在正式发布时并不需要，此时我们就能通过 clean任务进行清理。

gulp.task('clean', function() {
  return gulp.src(['dist/css/maps','dist/js/maps'], {read: false})
    .pipe(clean());
});

9、Gulp自动添加版本号gulp-rev + gulp-rev-collector

我们可以使用gulp-rev来产生一些无法使用cache的静态资源, 并且为它们生成manifest文件. 然后使用gulp-rev-collector来从manifest文件中收集数据并且替换html模板中的链接。示例代码：

//给文件添加版本号
gulp.task("revcss",function(){
    return gulp.src("src/css/*.css")  //- 需要处理的css文件
    .pipe(mincss())            //- 压缩css文件
    .pipe(rev())               //- 文件名加MD5后缀
    .pipe(gulp.dest("rev/css"))  //- 输出文件本地
    .pipe(rev.manifest())      //- 生成一个rev-manifest.json
    .pipe(gulp.dest("rev"));   //- 将 rev-manifest.json 保存到 rev 目录内
})
gulp.task("rev",function(){
    return gulp.src(["rev/*.json","src/index.html"])
       .pipe(revCollector({
            replaceReved: true,
            dirReplacements:{
                'css': 'rev/css'  //读取文件内css名并替换到index.html
            }
       }))
       .pipe(gulp.dest('revCdn')); //- 替换index.html的css文件名后的文件输出目录
})

具体可以查看如下链接：

gulp-rev更多详细使用
gulp-rev-collector更多详细使用

Gulp自动添加版本号

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面，具体使用请查看如下链接。