4. 其他插件介绍（Other plug-ins）

这部分插件作为扩展阅读，只做简单介绍。每个插件都有每个插件的特性，根据你的喜好和实际操作环境而定，萝卜青菜各有所爱。用的人最多的，不代表就是适合你的。总之，有时间有精力的，可以多试试，多玩玩，多配配，这里也只是冰山一角。

4.1 CSS类

1. CSS压缩 (gulp-minify-css)

安装命令：
npm install gulp-minify-css --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var minifyCss = require('gulp-minify-css'); // CSS压缩
gulp.task('minify-css', function() {
  return gulp.src('css/*.css')
    .pipe(gulp.dest('dist'));
});

执行命令：
gulp minify-css

2. CSS预处理/Less编译 (gulp-less)

安装命令：
npm install gulp-autoprefixer --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var less = require('gulp-less'); // LESS编译
gulp.task('less', function () {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

执行命令：
gulp less

3. 自动添加CSS3浏览器前缀(gulp-autoprefixer):

-prefix-free 大家肯定都比较熟，会自动为CSS添加上浏览器的前缀，帮你摆脱前缀痛苦。而 gulp-autoprefixer 插件同样如此。

安装命令：
npm install gulp-autoprefixer --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var autoprefixer = require('gulp-autoprefixer'); // 自动添加CSS3浏览器前缀
gulp.task('prefix', function () {
    gulp.src('src/css/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});
var gulp = require('gulp'); // 基础库
var sass = require('gulp-ruby-sass'), // sass/scss编译
  autoprefixer = require('gulp-autoprefixer'); // 自动添加CSS3浏览器前缀
gulp.task('sass', function () {
  return sass('src/css', { style: 'compressed' }) // 指明源文件路径、并进行文件匹配
    .on('error', function (err) {
      console.error('Error!', err.message); // 显示错误信息
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions'], // 主流浏览器的最新两个版本
      cascade: false // 是否美化属性值
    }))
    .pipe(gulp.dest('dist/css')); // 输出路径
});

执行命令：
gulp sass

4.2 图像类

1. 使用TinyPN API压缩图片(gulp-tinypng)：

使用TinyPNG官方API进行图片压缩。我个人比较喜欢这个，因为之前一直有在使用。但由于TinyPNG服务器在国外，有时执行起来会很慢，除非你有VPN，所以在这只做简单介绍。
经过我的测试，gulp-tinypng压缩后的图片大小，相当于使用imagemin-pngquant深度压缩后的大小。使用时需先注册TinyPNG账户，获你的API KEY。免费版每个月可以压缩500张图片，对于一般项目而言已经足够。

安装命令：
npm install gulp-tinypng --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var tinypng = require('gulp-tinypng'); // 使用TinyPN API压缩图片
gulp.task('tinypng', function(){
    return gulp.src('src/images/**/*') // 源地址
     .pipe(tinypng('填写TinyPN API KEY'))
    .pipe(gulp.dest('dist/images')); // 输出路径
});

执行命令：
gulp tinypng

4.3 其他

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);
});