## 一、主要功能 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