gulp 配置前端项目打包
项目发布时，需要对项目js文件进行压缩，混淆，连接等操作以减小项目http请求，加快访问。
gulpjs.com中有很多插件可以用来配置打包部署。
需要用的常用插件有：
gulp-jsmin 压缩js
gulp-minify-css 压缩css
gulp-imagemin 压缩图片
gulp-rename 重命名
gulp-clean 清空文件夹
gulp-copy 拷贝引用库，字体等文件
gulp-replace 替换html内容（将原来.js引用改为.min.js引用）
前置过程不再赘述，安装插件：
1 npm install --save-dev gulp gulp-jsmin gulp-minify-css gulp-imagemin gulp-rename gulp-clean gulp-copy gulp-replace
1 const gulp = require('gulp'), 2 jsmin = require('gulp-jsmin'), 3 cssmin = require('gulp-minify-css'), 4 rename = require('gulp-rename'), 5 copy = require('gulp-copy'), 6 clean = require('gulp-clean'), 7 imagemin = require('gulp-imagemin'), 8 replace = require('gulp-replace'); 9 10 // 清空文件夹 11 gulp.task('clean', () => { 12 gulp.src('dist') 13 .pipe(clean()) 14 }) 15 16 // js压缩 17 gulp.task('jsmin', () => { 18 gulp.src('js/*.js') 19 .pipe(jsmin()) 20 .pipe(rename({ 21 suffix: '.min' 22 })) 23 .pipe(gulp.dest('dist/js')); 24 }); 25 26 // css压缩 27 gulp.task('cssmin', () => { 28 gulp.src('css/*.css') 29 .pipe(cssmin()) 30 .pipe(rename({ 31 suffix: '.min' 32 })) 33 .pipe(gulp.dest('dist/css')) 34 }); 35 36 // 压缩图片 37 gulp.task('imagemin', () => { 38 gulp.src('images/*') 39 .pipe(imagemin()) 40 .pipe(gulp.dest('dist/images/')) 41 }); 42 43 // 复制文件 44 gulp.task('copy', () => { 45 gulp.src('lib/**/*') 46 .pipe(copy('dist')) 47 }); 48 49 // 替换HTML中的js及css引用为.min引用 50 gulp.task('replace', () => { 51 gulp.src('index.html') 52 .pipe(replace(/js\/.*\./g, '$&min.')) 53 .pipe(replace(/css\/.*\./g, '$&min.')) 54 .pipe(gulp.dest('dist')) 55 }); 56 57 // 部署任务 58 gulp.task('deploy', [ 59 'clean', 60 'jsmin', 61 'cssmin', 62 'imagemin', 63 'copy', 64 'replace' 65 ]);
以上，即可完成一套前端项目的打包。
