2. 插件介绍及使用方法（Tasks and dependencies）

2.1 HTML处理（HTML Task）

仅把开发环境中的HTML文件，移动至发布环境。

基础配置：

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

执行命令：
gulp html

2.2 样式处理（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安装成功。

注：
由于近期墙的比较严重，外加（上海）电信限制了外网访问速度。如果安装失败，请使用淘宝的Ruby镜像。具体操作方法请参考淘宝RubyGems镜像安装 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/css', { 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 的写法来套用，两者并不完全相同。

2.3 脚本压缩&重命名（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/*.js') // 指明源文件路径、并进行文件匹配
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
    .pipe(gulp.dest('dist/js')); // 输出路径
});

执行命令：
gulp script

2.4 图片处理（Image Task）

图片压缩(gulp-imagemin) + 深度压缩(imagemin-pngquant)：

压缩PNG、JPEG、GIF和SVG图像。
gulp-imagemin集成了gifsicle 、jpegtran 、optipng 、svgo 这4个插件。而imagemin-pngquant是imagemin插件的一个扩展插件，用于深度压缩图片。

安装命令：
npm install gulp-imagemin imagemin-pngquant --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var imagemin = require('gulp-imagemin'), // 图片压缩
  pngquant = require('imagemin-pngquant'); // 深度压缩
gulp.task('images', function(){
  return gulp.src('src/images/**/*.{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.5 自动刷新（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/*.scss', ['css']);
  // 监听 images
  gulp.watch('src/images/**/*.{png,jpg,gif,svg}', ['images']);
  // 监听 js
  gulp.watch('src/js/*.js', ['script']);
});
// 默认任务
gulp.task('default',['webserver','watch']);

执行命令：
gulp