使用gulp时常用的插件介绍及用法

可供使用的插件：

编译

gulp-sass - 通过 libsass将Sass编译成 CSS

gulp-ruby-sass - 通过 Ruby Sass将Sass编译成CSS

gulp-compass - 通过 Ruby Sass和CompassSass编译成CSS

gulp-less - Less编译成 CSS.

gulp-stylus - Stylus 编译成 CSS.

gulp-postcss - Pipe CSS 通过 PostCSS processors with a single parse.

gulp-coffee - Coffeescript 编译成 JavaScript.

gulp-typescript - TypeScript编译成JavaScript.

gulp-react - Facebook React JSX 模板编译成JavaScript.

webpack-stream - 将webpack集成在Gulp中使用。

gulp-babel - ES6编译成ES5 通过 babel.

扫描二维码关注公众号，回复： 5449820 查看本文章

gulp-traceur - ES6编译成ES5 通过 Traceur.

gulp-regenerator - ES6编译成ES5 通过 Regenerator.

gulp-myth - Myth - a polyfill for future versions of the CSS spec.

合并

gulp-concat - 合并文件.

压缩

gulp-clean-css - 压缩 CSS 通过 clean-css.

gulp-csso - 压缩 CSS 通过 CSSO.

gulp-uglify - 压缩 JavaScript 通过 UglifyJS2.

gulp-htmlmin - 压缩 HTML 通过 html-minifier.

gulp-minify-html - 压缩 HTML 通过 Minimize（包已被弃用，建议使用gulp-htmlmin）

gulp-imagemin - 压缩 PNG, JPEG, GIF and SVG 图片通过 imagemin.

gulp-svgmin - 通过Gulp压缩 SVG 文件

优化

gulp-uncss - 移除未使用的CSS选择器通过 UnCSS.

gulp-css-base64 - 将CSS文件中所有的资源(有url()声明的)变成base64-encoded 数据的URI字符串

gulp-svg2png - 将SVGs转换成PNGs

gulp-responsive - 生成不同尺寸的图片

gulp-svgstore -将svg files 合并成一个通过元素

gulp-iconfont - 通过SVG icons创建 icon fonts

资源注入

gulp-useref - 解析HTML文件中特殊标签里面的script或style标签，合并成一个script或css文件，并替换。

gulp-inject - 将指定的css或js文件以标签的形式插入到HTML中的指定标志内。

wiredep - 将Bower依赖自动注入HTML文件中。

模板

gulp-angular-templatecache - 在$templateCache中联系并注册AngularJS模板

gulp-jade - Jade 转换成 HTML.

gulp-handlebars - Handlebars模板转换成 JavaScript.

gulp-hb - Handlebars 模板转换成 HTML.

gulp-nunjucks - Nunjucks模板转换成JavaScript.

gulp-dustjs - Dust模板转换成JavaScript.

gulp-riot - Riot模板转换成JavaScript.

gulp-markdown - Markdown → HTML.

gulp-template - Lodash 模板转换成JavaScript.

gulp-swig - Swig模板转换成HTML.

gulp-remark - Gulp plugin for [remark]的Gulp插件(https://github.com/wooorm/remark) 通过插件处理markdown

代码校验

gulp-csslint - 通过CSSLint自动校验CSS.

gulp-htmlhint - 通过HTMLHint校验HTML.

gulp-jshint - 通过JSHint发现错误和潜在的问题.

gulp-jscs - 通过jscs检查JavaScript代码风格.

gulp-coffeelint - 一种用来保证CoffeeScript代码风格统一的检查。

gulp-tslint - gulp的TypeScript代码校验插件.

gulp-eslint - ECMAScript/JavaScript代码校验.

gulp-w3cjs - 通过w3cjs检验HTML.

gulp-lesshint - 通过lesshint校验LESS.

实时加载

browser-sync - 保证多个浏览器或设备网页同步显示 (recipes).

gulp-livereload - Gulp的实时加载插件.

缓存

gulp-changed - 仅让发生改变的文件通过.

gulp-cached - 一个简单的文件内存缓存.

gulp-remember - 记忆并回收通过了的文件.

gulp-newer - 只让新的源码通过.

流控制

merge-stream - 合并多个流到一个插入的流.

streamqueue - 逐渐输入队列的流.

run-sequence - 按要求运行一些依赖的Gulptask.

gulp-if - 按照条件运行task.

日志

gulp-notify - Gulp的通知插件.

gulp-size - 显示你的项目的大小.

gulp-debug - 通过调试文件流来观察那些文件通过了你的Gulp管道.

测试

gulp-mocha - 运行Mocha测试用例.

gulp-jasmine - 在Node.js中运行Jasmine 2 测试用例.

gulp-protractor - 为Protractor测试用例包裹Gulp.

gulp-coverage - 为Node.js覆盖相对于运行的测试运行独立的报告.

gulp-karma - 通过Gulp运行Karma测试用例.

gulp-ava- 通过Gulp运行AVA 测试用例.

其他插件

gulp-util - 包含一系列有用插件.

gulp-plumber - 防止错误引起管道中断Prevent pipe breaking caused by errors.

gulp-load-plugins - 自动加载Gulp插件.

main-bower-files - 构建时自动获取bower库的文件.

autoprefixer - 解析CSS且根据规则添加浏览器兼容性前缀.

gulp-sourcemaps - 提供source map支持.

gulp-replace - Gulp的一个字符串替换插件.

gulp-rename - 轻松重命名文件.

gulp-rev - 在静态文件名的后面添加hash值，如: unicorn.css → unicorn-d41d8cd98f.css.

del - 使用globs删除文件/文件夹.

gulp-exec - 运行一个shell命令.

gulp-strip-debug - 除去javascript代码中的console,alert,debugger声明.

gulp-cssimport - 解析CSS文件，找到imports,将连接文件替换成imort声明.

gulp-inline-css - 将HTML中的css属性放到style标签中.

gulp-gh-pages - 将内容发布到GiHub有页面.

gulp-ng-annotate - 通过ng-annotate添加Angular依赖注入.

gulp-bump - 通过Gulp Bump任何semvar JSON版本.

gulp-file-include - 通过Gulp Include文件.

gulp-zip - 以ZIP格式压缩文件.

gulp-git - 通过Gulp运行git命令.

gulp-filter - 使用globbing过滤文件.

gulp-preprocess - 基于自定义内容或环境配置预处理文件.

常用插件用法介绍：

1、gulp：测试、检查、合并、压缩、格式化、部署，监听，优化网页性能。

首先抛出一个问题：我们为什么用gulp？首先先问自己一个问题：平时用sass/less写css，用jade写/html代码，那么这些文件的的测试、检查、合并、压缩、格式化、部署，监听。应该怎么完成呢？就来压缩合并来讲，可以减少多个css，js文件请求，优化网页性能，这样的工作是否应该有一个很好的解决方案呢？—答案就是gulp

使用npm进行安装：

npm install gulp -g  //全局安装gulp
npm install gulp --save  //本地安装gulp

使用方法：

gulp有4个属性，即src，dest，watch，task：

 gulp.task(name[, deps], fn)//定义一个使用 Orchestrator 实现的任务（task）。name:任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。deps:类型： Array,一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。fn:该函数定义任务所要执行的一些操作。

 gulp.src(globs[, options])  //输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件,globs类型： String 或 Array

注意：
gulp.src('./src/css/*.css')中有第二个参数base，可以指定基础路径，如果不设置，则默认基础路径为 * 之前的路径。
base：'./src/css'
如果设置了 gulp.src('./src/css/*.css',{base：'./'})
则base是'./'
gulp.dest('./dist/css')传入的参数就是base路径
base:'./dist/css'
举个栗子来解释什么是替换
gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'))；
那么最后文件处理完成的最终路径是./dist/css/*.css
如果是gulp.src('./src/css/*.css',{base：'./'}).pipe().pipe(gulp.dest('./dist/css'))；
那么最后文件处理完成的最终路径是./dist/css/src/css/*.css


 gulp.dest(path[, options]) //能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。path类型： String or Function

 gulp.watch(glob[, opts], tasks)//监视文件，并且可以在文件发生改动时候做一些事情。glob:类型： String or Array,tasks:类型： Array

2、gulp-sass：通过 libsass将Sass编译成 CSS

使用npm进行安装：

npm install gulp-sass --save-dev

使用方法：

1.编译sass文件夹下的scss类型的文件为css文件的写法：

'use strict';
var gulp = require('gulp');//引入gulp
var sass = require('gulp-sass');//引入gulp-sass
gulp.task('sass', function () {   //创建sass任务名
  return gulp.src('./sass/**/*.scss')  //读取"./sass/**/"目录下的所有scss类型文件
    .pipe(sass().on('error', sass.logError)) //调用sass方法编译成css文件并打印错误日志，sass()方法用于转换sass到css
    .pipe(gulp.dest('./css')); //将生成的css文件放到"./css"文件夹下
});
gulp.task('sass:watch', function () {  //监听sass文件的变化
  gulp.watch('./sass/**/*.scss', ['sass']); //在sass任务执行之后，监听./sass/**/下的所有scss类型文件
});

2.同步编译转换的写法：

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError)) //调用sass.sync方法同步编译成css文件并打印错误日志
    .pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {//监听sass文件的变化
  gulp.watch('./sass/**/*.scss', ['sass']);
});

3、gulp-less：Less编译成 CSS

使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

使用npm进行安装：

npm install gulp-less --save-dev

使用方法：

1.编译less类型的文件为css文件的写法：

var gulp=require('gulp'),//引入gulp
var less=require('gulp-less');//引入gulp-less
gulp.task('testLess',function(){  //创建testLess任务名
    gulp.src('src/less/index.less') //读取"src/less/"目录下的所有index.less类型文件
        .pipe(less())  //调用less()将less文件转换成css文件
        .pipe(gulp.dest('src/css')); ////将生成的css文件放到"src/css"文件夹下
});

2.编译多个less类型文件的写法：

var gulp=require('gulp'),
var less=require('gulp-less');
gulp.task('testLesslist',function(){
    gulp.src(['src/index.less','src/less/detail.less'])//多个文件以数组形式传入
        .pipe(less())
        .pipe(gulp.dest('src/css'));//将会在src/css下生成index.css以及detail.css
});

4、gulp-stylus： Stylus 编译成 CSS

使用npm进行安装：

npm install --save-dev gulp-stylus

使用方法：

1.基本写法：

var gulp = require('gulp');//引入gulp
var stylus = require('gulp-stylus');//引入gulp-stylus
gulp.task('one', function () {//创建one任务
  return gulp.src('./css/one.styl')//读取"./css/"文件夹下one.styl文件
    .pipe(stylus()) //调用stylus方法转换成css
    .pipe(gulp.dest('./css/build'));//css文件放到"./css/build"目录下
});

2.gulp-stylus压缩生成的css：

gulp.task('compress', function () {
  return gulp.src('./css/compressed.styl')
    .pipe(stylus({
      compress: true //需要压缩
    }))
    .pipe(gulp.dest('./css/build'));
});

5、gulp-clean-css：编译css后压缩，一般都要压缩，用gulp-clean-css 压缩 CSS

使用gulp-clean-css压缩css文件，减小文件大小，并给引用url添加版本号避免缓存。（之前的有同样功能的gulp-minify-css已被废弃）

使用npm进行安装：

npm install gulp-clean-css --save-dev

使用方法：

1.基本写法：

var gulp = require('gulp'), //引入gulp
var cssmin = require('gulp-clean-css'); //引入gulp-clean-css
gulp.task('testCssmin', function () { //创建testCssmin任务
    gulp.src('src/css/*.css') //读取"src/css/"文件夹下所有的css文件
        .pipe(cleanCSS()) //调用cleanCSS方法压缩css
        .pipe(gulp.dest('dist/css')); //压缩的css文件放到"dist/css"目录下
});

2.cssmin方法更多参数使用：

var gulp = require('gulp'),
    cssmin = require('gulp-clean-css');
gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cleanCSS({
            advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest('dist/css'));
});

6、gulp-csso：压缩 CSS 通过 CSSO

使用npm进行安装：

npm install gulp-csso --save-dev

使用方法：

1.基本写法：

var gulp = require('gulp');//引入gulp
var csso = require('gulp-csso');//引入gulp-csso

gulp.task('default', function () { //创建default任务
    return gulp.src('./main.css')//读取"./main.css"文件
        .pipe(csso())//调用csso方法压缩css
        .pipe(gulp.dest('./out'));//压缩的css文件放到"./out"目录下
});

7、gulp-coffee： Coffeescript 编译成 JavaScript

使用npm进行安装：

npm install --save-dev gulp-coffee

使用方法：

1.基本写法：

var gulp = require('gulp'); //引入gulp
var coffee = require('gulp-coffee');//引入gulp-coffee
gulp.task('coffee', function() { //创建coffee任务
  gulp.src('./src/*.coffee')//读取"./src"文件夹下所有的coffee文件
    .pipe(coffee())//调用coffee方法转换成js
    .pipe(gulp.dest('./public/'));//js文件放到"./public"目录下
});

8、gulp-typescript： typeScript编译成JavaScript

使用npm进行安装：

npm install --global gulp-cli
npm install gulp
npm install gulp-typescript typescript

使用方法：

1.基本写法：

var gulp = require('gulp');//引入gulp
var ts = require('gulp-typescript');//引入gulp-typescript
gulp.task('default', function () {//创建default任务
    return gulp.src('src/**/*.ts')//读取"src/**"文件夹下所有的ts文件
        .pipe(ts({
            noImplicitAny: true, 
            outFile: 'output.js' //输出文件名为"output.js"
        }))
        .pipe(gulp.dest('built/local'));//js文件放到"built/local"目录下
});

9、gulp-uglify：通过 UglifyJS2压缩 JavaScript（一般js都要压缩）

使用gulp-uglify压缩javascript文件，减小文件大小。

使用npm进行安装：

npm install --save-dev gulp-uglify

使用方法：

1.基本写法：

var gulp=require('gulp'),  //引入gulp
var uglify=require('gulp-uglify');  //引入gulp-uglify
gulp.task('jsmin',function(){  //创建jsmin任务
    gulp.src('src/js/index.js')  //读取"src/js/index.js"文件
        .pipe(uglify())  //调用uglify压缩js文件
        .pipe(gulp.dest('dist/js'));  //压缩后的文件放到"dist/js"文件夹下
});

2.压缩多个js文件

var gulp=require('gulp'),  
var uglify=require('gulp-uglify');  
gulp.task('jsmin',function(){  
    gulp.src(['src/js/index.js','src/js/detail.js'])//多个文件以数组形式传入  
        .pipe(uglify())  
        .pipe(gulp.dest('dist/js'));  
});

3.带参数的使用

var gulp=require('gulp'),  
    uglify=require('gulp-uglify');  
gulp.task('jsmin',function(){  
    //压缩src/js目录下的所有js文件  
    //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）  
    gulp.src(['src/js/*.js','!src/js/**/{test1,test2}.js'])  
        .pipe(uglify({  
            mangle:true,//类型：Boolean 默认：true 是否修改变量名  
            compress:true,//类型：Boolean 默认：true 是否完全压缩  
            preserveComments:'all'//保留所有注释  
        }))  
        .pipe(gulp.dest('dist/js'));  
});

10、gulp-babel：ES6编译成ES5 通过 babel

使用npm进行安装：

npm install --save-dev gulp-babel @babel/core @babel/preset-env

使用方法：

1.基本写法：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () =>
    gulp.src('src/app.js') //读取"src/app.js"app.js文件
        .pipe(babel({
            presets: ['@babel/env']//presets字段设定转码规则
        }))
        .pipe(gulp.dest('dist'))//js文件放到"dist"目录下
);

11、gulp-concat：合并文件，用来减少网络请求。

使用npm进行安装：

npm install --save-dev gulp-concat

使用方法：

1.合并某个文件夹下的所有此类型的文件写法：

var gulp = require('gulp');//引用gulp
var concat = require('gulp-concat');//引入gulp-concat插件
gulp.task('scripts', function() {//创建名为“scripts”的task
  return gulp.src('./lib/*.js')  //读取lib文件夹下的所有js文件
    .pipe(concat('all.js'))   //将读取的所有js文件合并到all.js文件中
    .pipe(gulp.dest('./dist/'));  //将输出的all.js文件放到dist文件夹下，即“./dist/all.js”
});

2.合并特定文件的写法：

var concat = require('gulp-concat');
gulp.task('scripts', function() {
  return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])//读取多个特定的文件合并
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

12、gulp-replace： gulp的一个字符串替换插件

使用npm进行安装：

npm install --save-dev gulp-replace

使用方法：

1.基本写法：

var gulp = require('gulp');//引用gulp
var replace = require('gulp-replace');//引入gulp-replace插件
gulp.task('templates', function(){
  gulp.src(['file.txt']) //读取file.txt文件
    .pipe(replace('bar', 'foo')) //用foo替换bar
    .pipe(gulp.dest('build/'));//将file.txt内容替换后放到"build/"文件夹
});

13、gulp-htmlmin：压缩 HTML 通过 html-minifier

使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。

使用npm进行安装：

npm install gulp-htmlmin --save-dev

使用方法：

1.基本写法：

var gulp = require('gulp');//引用gulp
var htmlmin = require('gulp-htmlmin');//引入gulp-htmlmin插件
gulp.task('minify', function() {
  return gulp.src('src/*.html')//读取src下的所有html文件
    .pipe(htmlmin({collapseWhitespace: true})) collapseWhitespace: true,//压缩HTML
    .pipe(gulp.dest('dist'));//将输出文件放到dist文件夹下
});

2.多参数的用法：

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
gulp.task('testHtmlmin', 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/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));//将输出文件放到dist/html文件夹下
});

14、gulp-imagemin：压缩 PNG, JPEG, GIF and SVG 图片通过 imagemin

使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）

使用npm进行安装：

npm install gulp-imagemin --save-dev

使用方法：

1.基本写法：

var gulp = require('gulp'),//引用gulp
    imagemin = require('gulp-imagemin');//引入gulp-imagemin插件

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')//读取src/img下的所有png,jpg,gif,ico后缀名的文件
        .pipe(imagemin()) //调用imagemin方法压缩图片
        .pipe(gulp.dest('dist/img'));//将输出文件放到dist/img文件夹下
});

2.多参数的用法：

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

gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('dist/img'));
});

3.深度压缩图片：

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    //确保本地已安装imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
    pngquant = require('imagemin-pngquant');
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
        }))
        .pipe(gulp.dest('dist/img'));
});

4.只压缩修改的图片。压缩图片时比较耗时，在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）。

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    //确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev]
    cache = require('gulp-cache');
    gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

文章参考：

https://github.com/Pines-Cheng/awesome-gulp-cn awesome-gulp中文版

http://blog.csdn.net/yczz/article/details/52190251 gulp教程之gulp-less

http://blog.csdn.net/wu_xiaozhou/article/details/52865047 gulp常用插件-gulp-clean-css

http://blog.csdn.net/xuanjiewu/article/details/53318245 gulp教程之gulp-uglify（压缩文件）

http://www.ydcss.com/archives/20 gulp教程之gulp-htmlmin

http://blog.csdn.net/u013063153/article/details/52628506 gulp教程之gulp-imagemin