项目结构：
root
|--dist
|--node_modules
|--src
| |-css
| |-fonts
| |-img
| |-js
| |-index.html
|--gulpfile.js
|--package.json清理
dist目标文件夹插件：
del$ npm install del --save-devvar del = require('del'); gulp.task('del',function(){ del('./dist'); })HTML/CSS合并
插件：
gulp-useref安装：
$ npm install gulp-useref --save-dev说明：
gulp-useref作用是把 HTML 页面中的 javascript/CSS 引入合并成一个文件，不过它只负责合并，不负责压缩！用法：
gulp-useref识别的是 build 开头的注释，build 后面首先跟的是类型扩展名，再后面是所有文件合并后的新文件路径，这是相对于 HTML 的相对路径。修改
src目录 html 源文件：<!-- build:css css/main.css --> <link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/zerow.css" /> <!-- endbuild --> <!-- build:js js/main.js --> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/service.js"></script> <script src="js/zerow.js"></script> <!-- endbuild -->将多个 CSS 引用合并为一个
main.css，将多个 js 引用合并为一个main.js。var useref = require('gulp-useref'); gulp.task('useref',function(){ return gulp.src('src/index.html') .pipe(useref()) .pipe(gulp.dest('dist')) })处理后的源文件：
src/index.html，输出目录：dist，HTML 文件内容：<html> <head> <link rel="stylesheet" href="css/main.css"/> </head> <body> <script src="scripts/main.js"></script> </body> </html>
HTML/CSS压缩
上面的
gulp-useref只会合并文件，但是不会执行压缩，压缩 JS 我们选择gulp-uglify，压缩 CSS 选择gulp-clean-css(gulp-minify-cssis deprecate)，同时再安装一个插件：gulp-if，执行任务时，自动判断压缩 CSS 和 JS 时需使用的插件。安装：
$ npm install gulp-if gulp-clean-css gulp-uglify --save-devvar gulpIf = require('gulp-if'); var cleanCSS = require('gulp-clean-css'); var uglify = require('gulp-uglify'); gulp.task('useref',function(){ return gulp.src('src/index.html') .pipe(useref()) .pipe(gulpIf('*.css',cleanCSS())) .pipe(gulpIf('*.js',uglify())) .pipe(gulp.dest('dist')) })这样生成的
main.min.js和main.min.css都是经过压缩的。HTML压缩
插件：gulp-htmlmin（
gulp-html-minifyis deprecated）安装：
$ cnpm install gulp-htmlmin --save-devvar htmlmin=require('gulp-htmlmin'); gulp.task('useref',function(){ var options = { collapseWhitespace:true,//清除空格 collapseBooleanAttributes:true,//省略bool值，如<input checked="checked"/>变成<input checked/> removeComments:true,//清除注释 removeEmptyAttributes:true,//清除空属性 removeScriptTypeAttributes:true,//清除js脚本的type="text/javascript" removeStyleLinkTypeAttributes:true,//清除link样式表的type属性 minifyJS:true,//压缩html内的js minifyCSS:true //压缩html内的css }; return gulp.src('src/index.html') .pipe(useref()) .pipe(gulpIf('*.html',htmlmin(options))) .pipe(gulpIf('*.css',cleanCSS())) .pipe(gulpIf('*.js',uglify())) .pipe(gulp.dest('dist')) })图片压缩
安装：
$ npm install gulp-imagemin --save-devvar htmlmin=require('gulp-htmlmin'); gulp.task('imagemin',function(){ return gulp.src('src/img/*.+(png|jpg|gif|svg)') .pipe(imagemin({ optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化 })) .pipe(gulp.dest('dist/img')) })压缩图片缓存
图片较多的话，所有图片每次都要压缩处理比较耗费时间，使用
gulp-cache插件就无需重复压缩，每次只会压缩修改过的图片，其它从缓存读取。插件：
gulp-cache安装：
$ npm install gulp-cache --save-devvar imagecache=require('gulp-cache'); gulp.task('imagemin',function(){ var options={ optimizationLevel: 5, progressive: true, interlaced: true, multipass: true }; return gulp.src('src/img/*.+(png|jpg|gif|svg)') .pipe(imagecache(imagemin({options}))) .pipe(gulp.dest('dist/img')) }) //可以添加一个清除缓存任务 gulp.task('clear', function(){ cache.clearAll() } );
