Gulp——文件壓縮和文件指紋

時間  2019-11-21
標籤 gulp 文件 壓縮 指紋 欄目 JavaScript 简体版
原文   原文鏈接

先看下文件指紋添加成功發佈後的「成果」。javascript

 

首先介紹下gulp的文件壓縮（壓縮css和js）css

（下面介紹的代碼移步這裏）html

個人文件目錄以下：java

（標紅部分是生成的處理後的文件）node

如何使用gulp，請移步這裏（gulp詳細入門）json

Json裏面放這些插件就夠了：gulp

[plain]  view plain  copy
 
  1. {  
  2.   "name": "test",  
  3.   "version": "1.0.0",  
  4.   "description": "文件壓縮、文件指紋",  
  5.   "main": "gulpfile.js",  
  6.   "scripts": {  
  7.     "test": "echo \"Error: no test specified\" && exit 1"  
  8.   },  
  9.   "author": "小工匠",  
  10.   "license": "ISC",  
  11.   "devDependencies": {  
  12.     "gulp": "^3.9.1",  
  13.     "gulp-concat": "^2.6.0",  
  14.     "gulp-load-plugins": "^1.2.4",  
  15.     "gulp-minify-css": "^1.2.4",  
  16.     "gulp-uglify": "^1.5.4"  
  17.   }  
  18. }  

gulpfile.js配置文件以下：瀏覽器

 

[javascript]  view plain  copy
 
  1. var gulp = require('gulp'),  
  2.     plugins = require('gulp-load-plugins')();  
  3.   
  4. gulp.task('minifyCss',function() {  
  5.     return gulp.src('css/index.css')                    //輸入  
  6.             .pipe(plugins.concat('style.min.css'))      //合併（輸入的文件有多個時或合併成一個）  
  7.             .pipe(plugins.minifyCss())                  //壓縮  
  8.             .pipe(gulp.dest('./'));                     //輸出  
  9. })  
  10. gulp.task('minifyJs',function(){                        //過程同CSS  
  11.     return gulp.src('js/index.js')  
  12.             .pipe(plugins.concat('main.min.js'))  
  13.             .pipe(plugins.uglify())  
  14.             .pipe(gulp.dest('./'));  
  15. })  
  16. gulp.task('watch',function() {  
  17.             gulp.watch('css/index.css',['minifyCss']);  //「監控」index.css文件的變化，若是發生變化就執行壓縮命令(可批量監控文件，例如./**/*.css)  
  18.             gulp.watch('js/index.js',['minifyJs']);     //「監控」index.js文件的變化，若是發生變化就執行壓縮命令(可批量監控文件，例如./**/*.js)  
  19. })  

 

 

ok了，能夠執行watch監控文件的變化實時執行，也能夠分別執行minifyCss、minifyJs壓縮CSS、JS緩存

 

壓縮前的CSS代碼app

 

 

[html]  view plain  copy
 
  1. /*create by cc*/  
  2. body{  
  3.     margin: 0;  
  4.     padding: 0;  
  5.     /*font-family: '宋體';*/  
  6. }  
  7. .main{  
  8.     width: 100%;  
  9. }  
  10. .head{  
  11.     width: 80%;  
  12.     height: 100px;  
  13.     margin: 0 auto;  
  14.     background: rgba(7, 95,184, 0.5)  
  15. }  
  16. .body{  
  17.     width: 80%;  
  18.     height: 200px;  
  19.     margin: 0 auto;  
  20.     background: rgba(239, 228, 176, 0.6)  
  21. }  
  22. .footer{  
  23.     width: 80%;  
  24.     height: 100px;   
  25.     margin:0 auto;   
  26.     background: green;  
  27. }  


壓縮後的CSS代碼

 

 

[css]  view plain  copy
 
  1. 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文件的配置意義註釋的很清晰了。

 

 

其次，文件指紋添加。

平時在開發中老是會遇到這樣的問題。本身的代碼可能有一些小的問題，本身一眼就確認問題所在，可是修改事後卻得不到本身想要的結果，而後糾結半天，最後清一下瀏覽器緩存，發現都是緩存惹的禍。做爲開發者你能夠找出這樣的緣由，可是若是是普通的用戶的話，反饋來的問題可能就是這麼一個緩存的問題致使不愉快的用戶體驗。爲此，爲項目文件添加版本號，清除頁面引用緩存，是比較合適合理的，由於你總不可能每次發佈更新都要求用戶去像開發者那樣強刷瀏覽器吧？

下面介紹三種本身嘗試過的添加文件指紋的方法：

第一種：

須要增長的插件：

[html]  view plain  copy
 
  1. "gulp-rev": "^7.1.0",  
  2.  "gulp-rev-collector": "^1.0.5"  

 

以修改js名稱爲例

[html]  view plain  copy
 
  1. gulp.task('minifyJs',function(){                        //過程同CSS  
  2.     return gulp.src('js/index.js')  
  3.             .pipe(plugins.concat('main.min.js'))  
  4.             .pipe(plugins.uglify())  
  5.             .pipe(plugins.rev())                        //爲main.min.js增長10位的隨機hash值  
  6.             .pipe(gulp.dest('./'))                      //輸出修更名稱後的文件  
  7.             .pipe(plugins.rev.manifest())               //將生成與文件對應的鍵值對  
  8.             .pipe(gulp.dest('rev/js'))                  //鍵值對輸出  
  9.   
  10. })  
  11. gulp.task('htmlRouter',function() {  
  12.     return gulp.src(['rev/**/*.json','index.html'])      //  
  13.             .pipe(plugins.revCollector())                //替換引入的文件，將修更名稱後的文件引入  
  14.             .pipe(gulp.dest('./'))  
  15. })  

生成的鍵值對：

 

[html]  view plain  copy
 
  1. {  
  2.   "main.min.js": "main-336a363e91.min.js"  
  3. }  

 

 

修改文件名稱後生成的文件名：

Index.html引入路徑的變化：

[html]  view plain  copy
 
  1. <head>  
  2.     <meta charset="UTF-8">  
  3.     <title>gulp</title>  
  4.     <link rel="stylesheet" href="style.min.css">  
  5.     <script src="main-336a363e91.min.js"></script>  
  6. </head>  

執行後能夠看到已經作了版本的修改：

第二種：

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

形式一

 

[html]  view plain  copy
 
  1. "main.min.js": "main-336a363e91.min.js"  

 

形式二

 

[html]  view plain  copy
 
  1. "main.min.js": "main.min.js?v=336a363e91"  

 

替換的文件分別是：

 

 

[html]  view plain  copy
 
  1. gulp-rev\index.js  
  2. gulp-rev\node_modules\rev-path\index.js  
  3. gulp-rev-collector\index.js  

 

替換文件請移步這裏

分別替換這幾個文件便可，

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

生成的鍵值對：

 

[html]  view plain  copy
 
  1. {  
  2.  "main.min.js": "main.min.js?v=336a363e91"  
  3. }  

 

 

文件的名稱不會改變：

 

Index.html引入路徑的變化：

 

[html]  view plain  copy
 
  1. <head>  
  2.    <meta charset="UTF-8">  
  3.    <title>gulp</title>  
  4.    <link rel="stylesheet" href="style.min.css">  
  5.    <script src="main.min.js?v=336a363e91"></script>  
  6. </head>  

 

執行後能夠看到已經作了版本的修改：

 

第三種：使用append

gulp-rev-append 插件將經過正則

 

[html]  view plain  copy
 
  1. FILE_DECL=/(?:href=|src=|url\()['|"]([^\s>"']+?)\?rev=([^\s>"']+?)['|"]/gi;  

 

 

查找並給指定連接填加版本號（默認根據文件MD5生成，所以文件未發生改變，此版本號將不會變）

須要增長的插件

 

[html]  view plain  copy
 
  1. "gulp-rev-append":"^0.1.6"  

 

 

html引用的方式以下：

 

[html]  view plain  copy
 
  1. <head>  
  2.    <meta charset="UTF-8">  
  3.    <title>gulp</title>  
  4.    <link rel="stylesheet" href="style.min.css">  
  5.    <script src="main.min.js?rev=@@hash"></script>  
  6. </head>  

 

注意：<script src="main.min.js?rev=@@hash"></script>此處src的路徑下的文件是須要存在的，不然不會生成MD5值，緣由以下：

 

gulpfile.js配置

[javascript]  view plain  copy
 
  1. var gulp = require('gulp'),  
  2.     plugins = require('gulp-load-plugins')();  
  3.   
  4. gulp.task('minifyJs',function(){                        //過程同CSS  
  5.     return gulp.src('js/index.js')  
  6.             .pipe(plugins.concat('main.min.js'))  
  7.             .pipe(plugins.uglify())  
  8.             .pipe(gulp.dest('./'))                     //須要先生成文件，不然rev-append()無效  
  9.              
  10.   
  11. })  
  12. gulp.task('htmlRouter',function() {  
  13.     return gulp.src('index.html')       
  14.             .pipe(plugins.revAppend())                 //查找?rev=@@hash字符串，生成md5值          
  15.             .pipe(gulp.dest('./'))  
  16. })  

 

執行後的目錄結構：

 

執行後的文件指紋發生變化：

 

[html]  view plain  copy
 
  1. <head>  
  2.    <meta charset="UTF-8">  
  3.    <title>gulp</title>  
  4.    <link rel="stylesheet" href="style.min.css">  
  5.    <script src="main.min.js?rev=336a363e914f0a93aaa403dedf1c7b27"></script>  
  6. </head>  

 

執行後能夠看到已經作了版本的修改：

 

總結：這幾種方式均可以保證生產環境文件的惟一性，解決瀏覽器緩存等問題。

 

後話：由於這些都是本身在實際項目中嘗試過的方式，寫博文的時候不方便還原，因此用了簡單的demo來作測試用，可是根據實際的項目來作狀況會複雜不少，好比生成的文件重複、文件路徑沒法替換等，這些都須要使用到其餘的gulp插件，這個入門級的用法暫時介紹到這裏。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程