Gulp——檔案壓縮和檔案指紋

阿新 • • 發佈：2019-02-06

上週還倒騰了一件事，就是使用gulp給專案的JS和CSS新增版本，主要是控制新版本檔案釋出時瀏覽器快取的問題，我看很多工具稱這中做法叫做新增“檔案指紋”，這裡也這樣叫好了，其中壓縮是新增指紋前的一個步驟。

先看下檔案指紋新增成功釋出後的“成果”。

首先介紹下gulp的檔案壓縮（壓縮css和js）

我的檔案目錄如下：

（標紅部分是生成的處理後的檔案）

Json裡面放這些外掛就夠了：

{
  "name": "test",
  "version": "1.0.0",
  "description": "檔案壓縮、檔案指紋",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "小工匠",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^1.5.4"
  }
}

gulpfile.js配置檔案如下：

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')();

gulp.task('minifyCss',function() {
    return gulp.src('css/index.css')                    //輸入
            .pipe(plugins.concat('style.min.css'))      //合併（輸入的檔案有多個時或合併成一個）
            .pipe(plugins.minifyCss())                  //壓縮
            .pipe(gulp.dest('./'));                     //輸出
})
gulp.task('minifyJs',function(){                        //過程同CSS
    return gulp.src('js/index.js')
            .pipe(plugins.concat('main.min.js'))
            .pipe(plugins.uglify())
            .pipe(gulp.dest('./'));
})
gulp.task('watch',function() {
            gulp.watch('css/index.css',['minifyCss']);  //“監控”index.css檔案的變化，如果發生變化就執行壓縮命令(可批量監控檔案，例如./**/*.css)
            gulp.watch('js/index.js',['minifyJs']);     //“監控”index.js檔案的變化，如果發生變化就執行壓縮命令(可批量監控檔案，例如./**/*.js)
})

ok了，可以執行watch監控檔案的變化實時執行，也可以分別執行minifyCss、minifyJs壓縮CSS、JS

壓縮前的CSS程式碼

/*create by cc*/
body{
    margin: 0;
    padding: 0;
    /*font-family: '宋體';*/
}
.main{
    width: 100%;
}
.head{
    width: 80%;
    height: 100px;
    margin: 0 auto;
    background: rgba(7, 95,184, 0.5)
}
.body{
    width: 80%;
    height: 200px;
    margin: 0 auto;
    background: rgba(239, 228, 176, 0.6)
}
.footer{
    width: 80%;
    height: 100px; 
    margin:0 auto; 
    background: green;
}

壓縮後的CSS程式碼

body{margin:0;padding:0}.main{width:100%}.body,.footer,.head{width:80%;margin:0 auto}.head{height:100px;background:rgba(7,95,184,.5)}.body{height:200px;background:rgba(239,228,176,.6)}.footer{height:100px;background:green}

gulpfile檔案的配置意義註釋的很清晰了。

其次，檔案指紋新增。

平時在開發中總是會遇到這樣的問題。自己的程式碼可能有一些小的問題，自己一眼就確認問題所在，但是修改過後卻得不到自己想要的結果，然後糾結半天，最後清一下瀏覽器快取，發現都是快取惹的禍。作為開發者你可以找出這樣的原因，但是如果是普通的使用者的話，反饋來的問題可能就是這麼一個快取的問題導致不愉快的使用者體驗。為此，為專案檔案新增版本號，清除頁面引用快取，是比較合適合理的，因為你總不可能每次釋出更新都要求使用者去像開發者那樣強刷瀏覽器吧？

下面介紹三種自己嘗試過的新增檔案指紋的方法：

第一種：

需要增加的外掛：

"gulp-rev": "^7.1.0",
 "gulp-rev-collector": "^1.0.5"

以修改js名稱為例

gulp.task('minifyJs',function(){                        //過程同CSS
    return gulp.src('js/index.js')
            .pipe(plugins.concat('main.min.js'))
            .pipe(plugins.uglify())
            .pipe(plugins.rev())                        //為main.min.js增加10位的隨機hash值
            .pipe(gulp.dest('./'))                      //輸出修改名稱後的檔案
            .pipe(plugins.rev.manifest())               //將生成與檔案對應的鍵值對
            .pipe(gulp.dest('rev/js'))                  //鍵值對輸出

})
gulp.task('htmlRouter',function() {
    return gulp.src(['rev/**/*.json','index.html'])      //
            .pipe(plugins.revCollector())                //替換引入的檔案，將修改名稱後的檔案引入
            .pipe(gulp.dest('./'))
})

生成的鍵值對：

{
  "main.min.js": "main-336a363e91.min.js"
}

修改檔名稱後生成的檔名：

Index.html引入路徑的變化：

<head>
    <meta charset="UTF-8">
    <title>gulp</title>
    <link rel="stylesheet" href="style.min.css">
    <script src="main-336a363e91.min.js"></script>
</head>

執行後可以看到已經做了版本的修改：

第二種：

修改第一種方法的檔案配置，將形式一變成形式二

形式一

 "main.min.js": "main-336a363e91.min.js"

形式二

 "main.min.js": "main.min.js?v=336a363e91"

替換的檔案分別是：

gulp-rev\index.js
gulp-rev\node_modules\rev-path\index.js
gulp-rev-collector\index.js

分別替換這幾個檔案即可，

將gulpfile.js的配置仍然同上，執行程式碼後的結果

生成的鍵值對：

{
 "main.min.js": "main.min.js?v=336a363e91"
}

檔案的名稱不會改變：

Index.html引入路徑的變化：

<head>
   <meta charset="UTF-8">
   <title>gulp</title>
   <link rel="stylesheet" href="style.min.css">
   <script src="main.min.js?v=336a363e91"></script>
</head>

執行後可以看到已經做了版本的修改：

第三種：使用append

gulp-rev-append 外掛將通過正則

FILE_DECL=/(?:href=|src=|url\()['|"]([^\s>"']+?)\?rev=([^\s>"']+?)['|"]/gi;

查詢並給指定連結填加版本號（預設根據檔案MD5生成，因此檔案未發生改變，此版本號將不會變）

需要增加的外掛

"gulp-rev-append":"^0.1.6"

html引用的方式如下：

<head>
   <meta charset="UTF-8">
   <title>gulp</title>
   <link rel="stylesheet" href="style.min.css">
   <script src="[email protected]@hash"></script>
</head>

注意：<script src="[email protected]@hash"></script>此處src的路徑下的檔案是需要存在的，否則不會生成MD5值，原因如下：

gulpfile.js配置

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')();

gulp.task('minifyJs',function(){                        //過程同CSS
    return gulp.src('js/index.js')
            .pipe(plugins.concat('main.min.js'))
            .pipe(plugins.uglify())
            .pipe(gulp.dest('./'))                     //需要先生成檔案，否則rev-append()無效
           

})
gulp.task('htmlRouter',function() {
    return gulp.src('index.html')     
            .pipe(plugins.revAppend())                 //查詢[email protected]@hash字串，生成md5值        
            .pipe(gulp.dest('./'))
})

執行後的目錄結構：

執行後的檔案指紋發生變化：

<head>
   <meta charset="UTF-8">
   <title>gulp</title>
   <link rel="stylesheet" href="style.min.css">
   <script src="main.min.js?rev=336a363e914f0a93aaa403dedf1c7b27"></script>
</head>

執行後可以看到已經做了版本的修改：

總結：這幾種方式都可以保證生產環境檔案的唯一性，解決瀏覽器快取等問題。

後話：因為這些都是自己在實際專案中嘗試過的方式，寫博文的時候不方便還原，所以用了簡單的demo來做測試用，但是根據實際的專案來做情況會複雜很多，比如生成的檔案重複、檔案路徑無法替換等，這些都需要使用到其他的gulp外掛，這個入門級的用法暫時介紹到這裡。

Gulp——檔案壓縮和檔案指紋

Gulp——檔案壓縮和檔案指紋

Linux 檔案壓縮和打包

Hive的壓縮和檔案儲存格式

PHP 檔案壓縮和下載相關類的封裝

javaweb通過介面來實現多個檔案壓縮和下載（包括單檔案下載，多檔案批量下載）

gulp-htmlmin(壓縮HTML檔案)

Linux中檔案的壓縮和檔案傳輸

linux檔案壓縮和壓縮常用命令小結

pyspark讀取檔案路徑和檔案

C++ 學習筆記之——檔案操作和檔案流

檔案讀取和檔案寫入中需要注意的一些小知識

Ubuntu檔案系統和檔案管理

檔案包含和檔案上傳組合拳

IO流拷貝檔案目錄和檔案

python - 檔案系統和檔案

【Linux Shell指令碼攻略之一】find命令：檔案查詢和檔案列表

C++中檔案流和檔案的區分

雲伺服器之間實時檔案同步和檔案備份的最簡單高效的免費方案

Linux查詢檔案內容和檔案位置

linux檔案目錄和檔案連結

Gulp——檔案壓縮和檔案指紋

相關推薦