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引用）

前置过程不再赘述，安装插件：

 npm install --save-dev gulp gulp-jsmin gulp-minify-css gulp-imagemin gulp-rename gulp-clean gulp-copy gulp-replace

 const gulp = require('gulp'),
   jsmin = require('gulp-jsmin'),
   cssmin = require('gulp-minify-css'),
   rename = require('gulp-rename'),
   copy = require('gulp-copy'),
   clean = require('gulp-clean'),
   imagemin = require('gulp-imagemin'),
   replace = require('gulp-replace');

 // 清空文件夹
 gulp.task('clean', () => {
   gulp.src('dist')
     .pipe(clean())
 })

 // js压缩
 gulp.task('jsmin', () => {
   gulp.src('js/*.js')
     .pipe(jsmin())
     .pipe(rename({
       suffix: '.min'
     }))
     .pipe(gulp.dest('dist/js'));
 });

 // css压缩
 gulp.task('cssmin', () => {
   gulp.src('css/*.css')
     .pipe(cssmin())
     .pipe(rename({
       suffix: '.min'
     }))
     .pipe(gulp.dest('dist/css'))
 });

 // 压缩图片
 gulp.task('imagemin', () => {
   gulp.src('images/*')
     .pipe(imagemin())
     .pipe(gulp.dest('dist/images/'))
 });

 // 复制文件
 gulp.task('copy', () => {
   gulp.src('lib/**/*')
     .pipe(copy('dist'))
 });

 // 替换HTML中的js及css引用为.min引用
 gulp.task('replace', () => {
   gulp.src('index.html')
     .pipe(replace(/js\/.*\./g, '$&min.'))
     .pipe(replace(/css\/.*\./g, '$&min.'))
     .pipe(gulp.dest('dist'))
 });

 // 部署任务
 gulp.task('deploy', [
   'clean',
   'jsmin',
   'cssmin',
   'imagemin',
   'copy',
   'replace'
 ]);

以上，即可完成一套前端项目的打包。