使用gulp打包普通项目

前言：

　　在使用gulp打包工具之前，我做的H5项目在浏览器中的缓存是很严重的，若改了一点css，加了一句js代码，不手动清除浏览器缓存是看不到效果的。老总也在项目演示当中遇到这些问题，一查找原因却是缓存问题，于是老总多次要求得解决这个问题，不能每次遇到这个问题，你去叫客户清下缓存。于是我就在找解决问题的方法，一开始是想着如何可以动态的给引入的文件后面加上时间戳参数，试了一下貌似不行，就选择花时间去研究gulp打包工具了，这样既可以解决浏览器缓存的问题，也可提高代码的安全性！

环境安装：

　　首先，安装node环境，配置环境变量可参考文章：https://www.jianshu.com/p/03a76b2e7e00

　　其次，安装gulp，全局安装npm install gulp -g

在项目中使用gulp（我这里只说普通项目使用gulp）：

　　在项目的根目录下执行命令 npm init，创建package.json文件；

　　其次：在项目根目录下安装gulp：npm install --save-dev gulp，gulp的版本信息会保存在package.json文件中，下载的gulp依赖包会在node_modules里面；

　　安装好之后新建一个gulpfile.js的配置文件，这里编写打包执行的程序；

　　我的项目目录是这样的：这里包括配置文件，依赖包，还有最后输出的文件目录

gulp配置文件：

　　我这里根据我的目录来配置我的打包入口文件gulpfile.js,代码如下：　　

  1 var gulp = require(‘gulp‘);
  2 var babel = require(‘gulp-babel‘);//把es6语法解析成es5
  3 var concat = require(‘gulp-concat‘);//合并
  4 var uglify = require(‘gulp-uglify‘);//压缩
  5 var rev = require(‘gulp-rev‘);//对文件名加MD5后缀
  6 var revCollector = require(‘gulp-rev-collector‘);//替换路径
  7 var htmlmin = require(‘gulp-htmlmin‘); //压缩html里面的js，css，去除空格
  8 var del = require(‘del‘);//删除文件
  9 
 10 
 11 
 12 
 13 //js压缩
 14 gulp.task(‘js‘,function(){
 15     return gulp.src(‘./js/*.js‘)
 16     .pipe(babel())
 17     .pipe(uglify())
 18     .pipe(rev())
 19     .pipe(gulp.dest(‘./build/js‘))
 20     .pipe(rev.manifest(‘rev-js-manifest.json‘))
 21     .pipe(gulp.dest(‘./build/js‘));
 22 });
 23 
 24 
 25 //css压缩
 26 var autoprefix = require(‘gulp-autoprefixer‘);//兼容处理
 27 var minifyCss = require(‘gulp-minify-css‘);//压缩
 28 gulp.task(‘style‘,function(){
 29     return gulp.src(‘./css/*.css‘)
 30         .pipe(autoprefix({
 31                 browsers: [‘last 2 versions‘],
 32                 cascade: false
 33             }))
 34         .pipe(minifyCss())
 35         .pipe(rev())
 36         .pipe(gulp.dest(‘./build/css‘))
 37         .pipe(rev.manifest(‘rev-css-manifest.json‘))
 38         .pipe(gulp.dest(‘./build/css‘));
 39 });
 40 
 41 //img
 42 gulp.task(‘images‘, function (){
 43     return gulp.src([‘./images/*.jpg‘,‘./images/*.png‘,‘./images/*.gif‘])  
 44         .pipe(rev())//文件名加MD5后缀
 45         .pipe(gulp.dest(‘./build/images‘)) 
 46         .pipe(rev.manifest(‘rev-images-manifest.json‘))//生成一个rev-manifest.json
 47         .pipe(gulp.dest(‘./build/images‘));//将 rev-manifest.json 保存到 rev 目录内
 48 });
 49 
 50 //html压缩
 51 // gulp.task(‘revHtml‘,function(){
 52 //     var options = {
 53 //         removeComments: true,//清除HTML注释
 54 //         collapseWhitespace: true,//压缩HTML
 55 //         collapseBooleanAttributes: true,//省略布尔属性的值  ==> 
 56 //         removeEmptyAttributes: true,//删除所有空格作属性值  ==> 
 57 //         removeScriptTypeAttributes: true,//删除