## 一、主要功能 1、删除dist目录内容 2、js混淆压缩+错误检查 3、less转css、css加浏览器前缀、css背景图片合成、css压缩 4、图片压缩 5、html压缩、去注释、替换文件名称、删除空白行、压缩style和script等 ## 二、目录结构  ## 三、相关模块 ~~~ { "devDependencies": { "gulp": "^3.9.1", "gulp-clean": "^0.4.0", "gulp-clean-css": "^3.10.0", "gulp-css-spriter": "^0.4.0", "gulp-htmlmin": "^4.0.0", "gulp-imagemin": "^4.1.0", "gulp-less": "^4.0.1", "gulp-remove-empty-lines": "^0.1.0", "gulp-replace": "^1.0.0", "gulp-uglify": "^3.0.0", "less-plugin-autoprefix": "^2.0.0" } } ~~~ ## 四、gulpfile.js配置 ~~~ var gulp = require('gulp'); var clean = require('gulp-clean'); // 清除目录内容 // js相关 var uglify = require('gulp-uglify'); // 混淆压缩 // css相关 var less = require('gulp-less'); // less转css var LessAutoprefix = require('less-plugin-autoprefix'); // 补浏览器前缀 var cleanCSS = require('gulp-clean-css'); // css压缩 var spriter = require('gulp-css-spriter'); // css图片合成 // image相关 var imagemin = require('gulp-imagemin'); // 图片压缩 // html相关 var htmlmin = require('gulp-htmlmin'); // html压缩 var removeEmptyLines = require('gulp-remove-empty-lines'); // 清除空白行 var replace = require('gulp-replace'); // 替换文件名 // 删除dist目录 gulp.task('clean', function() { gulp.src('./dist', {read: false}).pipe(clean()); }); // js处理 gulp.task('js', function() { gulp.src("./src/js/*.js") .pipe(uglify({mangle: true, compress: false})) .on('error', function (err) { console.log(err.toString()); }) .pipe(gulp.dest("./dist/js")); }); // css处理 gulp.task('css', function() { gulp.src('./src/less/*.less') .pipe(less({ plugins: [ new LessAutoprefix({browsers: ['last 2 versions']}) ] })) .pipe(spriter({ spriteSheet: './dist/images/spritesheet.png', pathToSpriteSheetFromCSS: '../images/spritesheet.png' })) .pipe(cleanCSS()) .pipe(gulp.dest('./dist/css')); }); // image处理 gulp.task('image', function() { gulp.src("./src/images/*") .pipe(imagemin()) .pipe(gulp.dest("./dist/images")); }); // html处理 gulp.task('html', function() { var options = { removeComments: true, // 清除HTML注释 collapseWhitespace: false, // 压缩HTML collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css" minifyJS: true, // 压缩页面JS minifyCSS: true // 压缩页面CSS }; gulp.src('src/index.html') .pipe(replace('less/index.less', 'css/index.css')) .pipe(removeEmptyLines({removeComments: true})) .pipe(htmlmin(options)) .pipe(gulp.dest('./dist')); }); gulp.task('default', ['js', 'css', 'image', 'html']); ~~~ ## 五、执行任务 1、执行 js 任务 ~~~ gulp js ~~~ 2、执行 css 任务 ~~~ gulp css ~~~ 3、执行 image 任务 ~~~ gulp image ~~~ 4、执行 html 任务 ~~~ gulp html ~~~ 5、执行 clean 任务 ~~~ gulp clean ~~~ 6、执行 default 任务（即把js、css、image、html任务都执行了） ~~~ gulp ~~~ 7、执行 watch 任务（监听html是否修改） ~~~ gulp watch ~~~ ## 六、附加 1、如要执行默认任务的时候，也想执行clean任务，可以下载模块gulp-sequence使用 ~~~ var gulpSequence = require('gulp-sequence'); // 同步执行 gulp.task('default', gulpSequence( 'clean', 'js', 'css', 'image', 'html')); // 或 gulp.task('default', function(callback) { gulpSequence( 'clean', 'js', 'css', 'image', 'html')(callback); }); ~~~ 2、监听html发生变化，执行 default 任务 ~~~ gulp.task('watch', function () { gulp.watch('./src/index.html', ['default']); }); ~~~ 参考链接：https://www.cnblogs.com/EasonJim/p/6209951.html