先看下文件指紋添加成功發布后的“成果”。
?
首先介紹下gulp的文件壓縮（壓縮css和js）
（下面介紹的代碼移步這里）
我的文件目錄如下：
（標紅部分是生成的處理后的文件）
如何使用gulp，請移步這里（gulp詳細入門）
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="main.min.js?rev=@@hash"></script>??
- </head>??
?
注意：<script src="main.min.js?rev=@@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())?????????????????//查找?rev=@@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插件，這個入門級的用法暫時介紹到這里。
