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'
]);

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