项目结构:
root
|--dist
|--node_modules
|--src
| |-css
| |-fonts
| |-img
| |-js
| |-index.html
|--gulpfile.js
|--package.json
清理
dist
目标文件夹插件:
del
$ npm install del --save-dev
var 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-css
is deprecate),同时再安装一个插件:gulp-if
,执行任务时,自动判断压缩 CSS 和 JS 时需使用的插件。安装:
$ npm install gulp-if gulp-clean-css gulp-uglify --save-dev
var 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-minify
is deprecated)安装:
$ cnpm install gulp-htmlmin --save-dev
var 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-dev
var 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-dev
var 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() } );