使用gulp打包普通項目

前言：

還沒使用gulp打包工具時，筆者的H5項目在瀏覽器中的緩存問題很大，若改了一點css，加了一句js代碼，不手動清除瀏覽器緩存都沒法看的效果。老板也在項目演示時碰到這個情況，查找原因發(fā)現(xiàn)是緩存問題，老板多次提出說要解決這個問題，不能每次遇到這個問題，你去叫客戶清下緩存。于是筆者就開始尋找解決問題的方法，一開始是想著如何可以動態(tài)的給引入的文件后面加上時間戳參數(shù)，試了一下貌似不行，就選擇花時間去研究gulp打包工具了，這樣既可以解決瀏覽器緩存的問題，也可提高代碼的安全性！

環(huán)境安裝：

詳情請看上文的 安裝 Node 和 gulp

在項目中使用gulp（我這里只說普通項目使用gulp）：

在項目的根目錄下執(zhí)行命令 npm init，創(chuàng)建package.json文件；

其次：在項目根目錄下安裝gulp：npm install --save-dev gulp，gulp的版本信息會保存在package.json文件中，下載的gulp依賴包會在node_modules里面；

安裝好之后新建一個gulpfile.js的配置文件，這里編寫打包執(zhí)行的程序；

我的項目目錄是這樣的：這里包括配置文件，依賴包，還有最后輸出的文件目錄

gulp配置文件：

我這里根據(jù)我的目錄來配置我的打包入口文件 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 目錄內(nèi)
 48 });
 49 
 50 //html壓縮
 51 // gulp.task('revHtml',function(){
 52 //     var options = {
 53 //         removeComments: true,//清除HTML注釋
 54 //         collapseWhitespace: true,//壓縮HTML
 55 //         collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
 56 //         removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
 57 //         removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
 58 //         removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
 59 //         minifyJS: true,//壓縮頁面JS
 60 //         babel:true,
 61 //         minifyCSS: true//壓縮頁面CSS
 62 //     };
 63 //     return gulp.src('./html/*.html')
 64 //         .pipe(htmlmin(options))
 65 //         .pipe(gulp.dest('./build/html'))
 66 // });
 67 
 68 
 69 gulp.task('revimg', function() {
 70     //css，主要是針對img替換
 71     return gulp.src(['./build/**/rev-images-manifest.json', './build/css/*.css'])
 72         .pipe(revCollector({
 73             replaceReved:true
 74         }))
 75         .pipe(gulp.dest('./build/css'));
 76 });
 77 gulp.task('revjs', function() {
 78     //css，主要是針對img替換
 79     return gulp.src(['./build/**/rev-images-manifest.json', './build/js/*.js'])
 80         .pipe(revCollector({
 81             replaceReved:true,
 82             dirReplacements:{
 83                 '../images': '../build/images'
 84             }
 85          }))
 86         .pipe(gulp.dest('./build/js'));
 87 });
 88 
 89 //使用rev替換成md5文件名，這里包括html和css的資源文件也一起
 90 gulp.task('rev', function() {
 91     //html，針對js,css,img
 92     return gulp.src(['./build/**/*.json', './html/*.html'])
 93         .pipe(revCollector({
 94            
 95             replaceReved:true 
 96         }))
 97         .pipe(gulp.dest('./html'));
 98 });
 99 
100 //刪除Build文件
101 gulp.task('clean:Build', function () {
102    return del([
103         './build/**/',
104     ]);
105 });
106 
107 
108 //執(zhí)行多個任務(wù)gulp4的用法 gulp.series()串行，gulp.parallel()并行
109 gulp.task('default', gulp.series('clean:Build', gulp.parallel('js','images','style'),'revimg','revjs','rev',function(){
110     
111 }))

這里對上述代碼做一些說明：

1-9行引入的是對html，js，css，img文件進(jìn)行相關(guān)處理的工具；

對js的處理：這里用babel工具把js轉(zhuǎn)成es5的語法，做兼容處理（使用babel的時候要創(chuàng)建一個.babelrc文件），而后用gulp-uglify工具壓縮代碼，gulp.dest('./build/js')是輸出的目錄，目錄不存在會自動創(chuàng)建。

rev()這個方法是給文件名后加上Md5的版本號；其后的rev.manifest()方法是給js生成版本號的清單文件，方便后面文件替換

對css的處理：這里用到的是gulp-autoprefixer工具來處理css的兼容問題，這里強(qiáng)調(diào)一點，普通的兼容處理是可以用這個工具來處理的，要是特殊的兼容語法還得在寫代碼的時候自己加上去，例如flex的兼容用法

css壓縮工具：gulp-minify-css，之后的執(zhí)行同上

對圖片處理： 我這里只是給文件名后面加了個版本號的處理，沒有做壓縮，有需要可以自己添加

對Html的處理：上面注釋寫的很清楚，但這個項目里面我并沒有對html文件做特別的處理

后面三個任務(wù)是針對js，css，img文件做替換的處理，用的gulp-rev-collector工具

最后一個任務(wù)是入口任務(wù)，然后按順序執(zhí)行各個任務(wù)，至打包結(jié)束；

最后打包：

在根目錄下執(zhí)行命令: gulp 進(jìn)行打包，打包成功如下：

注：

　　1、.babelrc文件的創(chuàng)建（windows上面創(chuàng)建時：文件名寫成：.babelrc. 即可創(chuàng)建成功），代碼如下：

1 {
2     "presets": ["env"]
3 }

　　2、在執(zhí)行打包命令的時候會報一些錯，如下：這種情況是擬引入的工具依賴包沒有安裝，按照提示一個個安裝就行

優(yōu)勢：

　　可解決瀏覽器緩存問題，提高代碼的安全性，配置文件寫好，操作起來很方便

劣勢：

　　打包之后會生成新的目錄文件，相當(dāng)于復(fù)制了一份，會占用更多的空間，像上述我這種做法，替換文件需先手動添加到build目錄，在執(zhí)行打包就沒有問題，這樣繁瑣了點，所以我建議，html也處理一下，把整個項目生成一個新的目錄，然后線上直接發(fā)布打包后的目錄文件就好。