Gulp常用插件

gulp中的常用插件：

HTML处理（HTML Task）仅把开发环境中的HTML文件，移动至发布环境。

基础配置：gulp.task('html', function(){

  return gulp.src('src*.html') // 指明源文件路径、并进行文件匹配
    .pipe('dist'); // 输出路径
});

执行命令：gulp html

 样式处理（CSS Task）CSS预处理/Sass编译 ( gulp-ruby-sass ) ：相比较glup-sass而言，速度会稍许慢点，但功能更多并且稳定。

安装SASS：

1. 像Gulp基于Node.js一样，Sass基于Ruby环境，所以我们先去官网下载并安装 Ruby （在安装的时候，请勾选 Add Ruby executables to your PATH 这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境）。

    2. 安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开 Start Command Prompt with Ruby 

3. 然后直接在命令行中输入 gem install sass 按回车键确认，等待一段时间就会提示你sass安装成功。

安装命令：npm install gulp-ruby-sass --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var sass = require('gulp-ruby-sass'); // sass/scss编译

gulp.task('sass', function () {
     return sass('src/sass', { style: 'compressed' }) // 指明源文件路径、并进行文件匹配（style: 'compressed' 表示输出格式）
          .on('error', function (err) {
               console.error('Error!', err.message); // 显示错误信息
          })
          .pipe(gulp.dest('dist/css')); // 输出路径
});

执行命令：gulp sass

插件提供4种输出格式：

nested：嵌套缩进的css代码，它是默认值。

expanded：没有缩进的、扩展的css代码。

compact：简洁格式的css代码。

compressed：压缩后的css代码。

注：使用前清看清 gulp-ruby-sass 写法，不要直接拿 gulp-sass 的写法来套用，两者并不完全相同。

脚本压缩&重命名（Javascript Task）

JS文件压缩( gulp-uglify )：

使用uglify引擎压缩JS文件。

安装命令：

npm install gulp-uglify --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var uglify = require('gulp-uglify'); // js压缩

gulp.task('script', function() {
  return gulp.src('src/js*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
    .pipe(imagemin({
      progressive: true, // 无损压缩JPG图片
      svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
      use: [pngquant()] // 使用pngquant插件进行深度压缩
    }))
    .pipe(gulp.dest('dist/images')); // 输出路径
});

执行命令：gulp images

注：一般我们所使用的图片压缩方法，都会对图像造成一定的损失，这个和压缩比率有一定的关系。通常我们所说的无损压缩，也只是控制在我们肉眼难以发现的范围内。换句话来说，在你保存切图的同时，其实已经对图像造成了一定的损失，因为没什么人会选择100%最佳质量导出图片。两者是差不多的概念。

2 自动刷新（LiveReload Task）

网页自动刷新（文件变动后即时刷新页面）( gulp-livereload ) + 静态服务器：( gulp-webserver )：

安装命令：

npm install gulp-livereload gulp-webserver --save-dev

var gulp = require('gulp'); // 基础库
var livereload = require('gulp-livereload'), // 网页自动刷新（文件变动后即时刷新页面）
  webserver = require('gulp-webserver'); // 本地服务器

// 注册任务
gulp.task('webserver', function() {
  gulp.src( '.' ) // 服务器目录（.代表根目录）
  .pipe(webserver({ // 运行gulp-webserver
    livereload: true, // 启用LiveReload
    open: true // 服务器启动时自动打开网页
  }));
});

// 监听任务
gulp.task('watch',function(){
  // 监听 html
  gulp.watch('src*.html', ['html'])
  // 监听 scss
  gulp.watch('src/scss*.{png,jpg,gif,svg}', ['images']);
  // 监听 js
  gulp.watch('src/js。这样在我们调试时，就会直接显示（映射）源码，而不时编译后的代码。

安装命令：

npm install gulp-sourcemaps --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var uglify = require('gulp-uglify'), // js压缩
  rename = require('gulp-rename'), // 文件重命名
  sourcemaps = require('gulp-sourcemaps'); // 来源地图

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

执行命令：gulp images

此时我们再去 dist/images 文件夹，查看每个图片的最后修改日期，你就会发现只针对你刚才修改过的图片（文件）行了处理，而那些之前已经处理过的图片则没有再进行操作。

注：无论是 gulp-changed 还是下文中提到的 gulp-cache ，对 sass 文件无效，始终会对所有匹配文件进行操作。

文件合并( gulp-concat )：
比如我们有多个JS库，jquery.min.js、bootstrap.min.js、angular.min.js。此时可以通过合并，减少网络请求。

安装命令：

npm install gulp-concat --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var concat = require("gulp-concat"); // 文件合并
 
gulp.task('concat', function () {
    gulp.src('js*') // 源地址
     .pipe(tinypng('填写TinyPN API KEY'))
    .pipe(gulp.dest('dist/images')); // 输出路径
});

执行命令：

gulp tinypng

1. 缓存代理( gulp-cache )：
缓存操作过的文件，当文件修改时，只编译当前修改的文件。其余文件直接从缓存中调取，提高效率。缺点：因为是缓存，所以如果文件被删除，但没及时清理缓存文件时，就会导致被删除的文件又从缓存中读取了出来，所谓成也萧何败也萧何。

安装命令：

npm install gulp-cache --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var imagemin = require('gulp-imagemin'), // 图片压缩
  pngquant = require('imagemin-pngquant'), // 深度压缩
  pngquant = require('imagemin-cache'), // 缓存代理
  clean = require('imagemin-clean'); // 文件清理

// imagemin 图片压缩（利用cache）
gulp.task('images', function(){
  return gulp.src('src/images*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
    .pipe(cache(imagemin({
      progressive: true, // 无损压缩JPG图片
      svgoPlugins: [{removeViewBox: false}], // 不要移除svg的viewbox属性
      use: [pngquant()] // 使用pngquant插件进行深度压缩
    })))
    .pipe(gulp.dest('dist/images')); // 输出路径
});
// 清理缓存文件
gulp.task('clean', function (done) {
  return cache.clearAll(done);
});

匹配规则（Match Files）

 gulp.src(['*.js','!b*.js']) // 匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js',*.js]) // 不会排除任何文件，因为排 除模式不能出现在数组的第一个元素中

此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：a{b,c}d 会展开为 abd,acd 
a{b,}c 会展开为 abc,ac 
a{0..3}d 会展开为 a0d , a1d , a2d , a3d 
a{b,c{d,e}f}g 会展开为 abg , acdfg , acefg 

a{b,c}d{e,f}g 会展开为 abdeg , acdeg , abdeg , abdfg

注意事项（Attention）

• watch 的时候路径不要用 './path'，直接使用 '/path' 即可不然会导致新增文件无法被 watch。
• gulp 对于 one after one 的任务链，需要加 return，比如 gulp clean

gulp ---yargs：让命令行的参数都放在变量args上，非常方便。它可以处理的参数类型也是多种多样的：

• 单字符的简单参数，如传入-m=5或-m 5，则可得到args.m = 5。
• 多字符参数（必须使用双连字符），如传入--test=5或--test 5，则可得到args.test = 5。
• 不带值的参数，如传入--mock，则会被认为是布尔类型的参数，可得到args.mock = true。gulp-tmod：TmodJS（原名atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板，从而让前端模板实现工程化管理，最终保证前端模板在复杂单页web 应用下的可维护性。同时预编译输出的代码经过多层优化，能够在最大程度节省客户端资源消耗。

          gulp-util：gulp-util带有很多方便的函数，其中最常用的应该就是log了。$.util.log()支持传入多个参数，打印结果会将多个参数用空格连接起来。它与console.log的区别就是所有$.util.log的结果会自动带上时间前缀。另外，它还支持颜色，如$.util.log($.util.colors.magenta('123'));打印出来的123是品红色的。其实$.util.colors就是一个 chalk的实例，而chalk是专门用来处理命令行打印着色的一个工具。

gulp-jshint的错误提示

既然检测错误，那就得把错误信息和错误位置提示出来，好让我们进行修改。在gulpfile.js里编写如下的代码

var gulp = require('gulp'); var jshint = require('gulp-jshint'); // 建立js任务，进行代码检查gulp.task('js', function(){ gulp.src('./js*.js') // 检查文件：js目录下所有的js文件 .pipe(jshint()) // 进行检查 .pipe(jshint.reporter('default')) // 对代码进行报错提示 }); gulp.task('default', ['js']).