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