使用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,代碼如下：　　

var gulp = require('gulp');
var babel = require('gulp-babel');//把es6語法解析成es5
var concat = require('gulp-concat');//合並
var uglify = require('gulp-uglify');//壓縮
var rev = require('gulp-rev');//對文件名加MD5后綴
var revCollector = require('gulp-rev-collector');//替換路徑
var htmlmin = require('gulp-htmlmin'); //壓縮html里面的js，css，去除空格
var del = require('del');//刪除文件




//js壓縮
gulp.task('js',function(){
    return gulp.src('./js/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('./build/js'))
    .pipe(rev.manifest('rev-js-manifest.json'))
    .pipe(gulp.dest('./build/js'));
});


//css壓縮
var autoprefix = require('gulp-autoprefixer');//兼容處理
var minifyCss = require('gulp-minify-css');//壓縮
gulp.task('style',function(){
    return gulp.src('./css/*.css')
        .pipe(autoprefix({
                browsers: ['last 2 versions'],
                cascade: false
            }))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('./build/css'))
        .pipe(rev.manifest('rev-css-manifest.json'))
        .pipe(gulp.dest('./build/css'));
});

//img
gulp.task('images', function (){
    return gulp.src(['./images/*.jpg','./images/*.png','./images/*.gif'])  
        .pipe(rev())//文件名加MD5后綴
        .pipe(gulp.dest('./build/images')) 
        .pipe(rev.manifest('rev-images-manifest.json'))//生成一個rev-manifest.json
        .pipe(gulp.dest('./build/images'));//將 rev-manifest.json 保存到 rev 目錄內
});

//html壓縮
// gulp.task('revHtml',function(){
//     var options = {
//         removeComments: true,//清除HTML注釋
//         collapseWhitespace: true,//壓縮HTML
//         collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
//         removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
//         removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
//         removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
//         minifyJS: true,//壓縮頁面JS
//         babel:true,
//         minifyCSS: true//壓縮頁面CSS
//     };
//     return gulp.src('./html/*.html')
//         .pipe(htmlmin(options))
//         .pipe(gulp.dest('./build/html'))
// });


gulp.task('revimg', function() {
    //css，主要是針對img替換
    return gulp.src(['./build/**/rev-images-manifest.json', './build/css/*.css'])
        .pipe(revCollector({
            replaceReved:true
        }))
        .pipe(gulp.dest('./build/css'));
});
gulp.task('revjs', function() {
    //css，主要是針對img替換
    return gulp.src(['./build/**/rev-images-manifest.json', './build/js/*.js'])
        .pipe(revCollector({
            replaceReved:true,
            dirReplacements:{
                '../images': '../build/images'
            }
         }))
        .pipe(gulp.dest('./build/js'));
});

//使用rev替換成md5文件名，這里包括html和css的資源文件也一起
gulp.task('rev', function() {
    //html，針對js,css,img
    return gulp.src(['./build/**/*.json', './html/*.html'])
        .pipe(revCollector({
           
            replaceReved:true 
        }))
        .pipe(gulp.dest('./html'));
});

//刪除Build文件
gulp.task('clean:Build', function () {
   return del([
        './build/**/',
    ]);
});


//執行多個任務gulp4的用法 gulp.series()串行，gulp.parallel()並行
gulp.task('default', gulp.series('clean:Build', gulp.parallel('js','images','style'),'revimg','revjs','rev',function(){
    
}))

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

　　1-9行引入的是對html，js，css，img文件進行相關處理的工具；

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

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

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

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

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

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

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

　　最后一個任務是入口任務，然后按順序執行各個任務，至打包結束；

最后打包：

　　在根目錄下執行命令: gulp 進行打包，打包成功如下：

　　

注：

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

{
    "presets": ["env"]
}

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

　　

優勢：

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

劣勢：

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

 

有不對的地方，希望各位大神指出來，讓我學習學習，歡迎大家指點！