[TOC]

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

2.1 HTML处理（HTML Task）

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

基础配置：

gulp.task('html', function() {

执行命令：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'); // 基础库

执行命令：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'); // 基础库

执行命令：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'); // 基础库

执行命令：gulp images

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

2.5 自动刷新（LiveReload Task）

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

安装命令：npm install gulp-livereload gulp-webserver —save-dev

var gulp = require('gulp'); // 基础库

执行命令：gulp