使用gulp解決RequireJS項目前端緩存問題（一）

1、前言

使用gulp解決RequireJS項目前端緩存問題（一）

使用gulp解決RequireJS項目前端緩存問題（二）

 

前端緩存一直是個令人頭疼的問題，你有可能見過下面博客園首頁的資源文件鏈接：

 

有沒有發現文件名后面有一串不規則的東東，沒錯，這就是運用緩存機制，我們今天研究的就是這種東西。

先堵為快，猛戳鏈接下載Demo ：https://github.com/hua126mail/gulpRequireJsCache

以dist為根目錄，運行http://localhost/html/index.html,如果出現“Good！成功加載index.js”，則表示成功了。

 

不熟悉gulp的同學，可以參考這個比較詳細的教程：http://www.ydcss.com/archives/18

不熟悉RequireJS的同學，可以參考官方教程:http://www.requirejs.cn/

 

2、項目主要目錄：

　　gulpRequireJsCache
　　|
　　|-- dist　　　　　　　　　　//存放發布的文件
　　|
　　|-- rev　　　　　　　　　　//存放控制版本號的 rev-manifest.json
　　|
　　|-- src　　　　　　　　　　//項目源文件
　　|
　　|-- gulpfile.js　　　　　//gulp主文件，定義的任務都在這里
　　|
　　|-- package.json　　　　//gulp依賴包配置文件
　　|
　　|-- landing.html

　　根據執行命令npm install --save-dev后，主目錄下會多一個node_modules文件夾，至此，gulp基本配置完成。

　　gulpfile文件：

var gulp = require('gulp'),
    sass = require('gulp-sass'),                        //編譯sass
    cssmin = require('gulp-clean-css'),                    //壓縮css
    autoprefixer = require('gulp-autoprefixer'),        //添加瀏覽器前綴
    rev = require('gulp-rev'),                            //添加版本號
    revCollector = require('gulp-rev-collector'),        //添加版本號
    clean = require('gulp-clean'),                        //清理文目標文件夾
    csso = require('gulp-csso'),                        //合並css屬性
    csslint = require('gulp-csslint'),                    //css語法檢查
    csscomb = require('gulp-csscomb'),                    //css 樣式表的各屬性的順序
    imagemin = require('gulp-imagemin'),                //圖片壓縮
    cache = require('gulp-cache'),                        //緩存處理
    htmlmin = require('gulp-htmlmin'),                    //壓縮html
    replace = require('gulp-replace'),                    //替換路徑
    uglify = require('gulp-uglify'),                    //壓縮js
    jshint = require('gulp-jshint')                        //js語法檢查
;

gulp.task("cleanCss",function(){
    return gulp.src('dist/css',{read:false})
    .pipe(clean());
});

gulp.task('sass', ['cleanCss'],function () {            //執行完cleanCss任務后再執行sass任務
      gulp.src('src/sass/**/*.scss')
    .pipe(sass())
    .pipe(cssmin())
    .pipe(autoprefixer())
    //.pipe(csscomb())
    .pipe(csso())
    .pipe(csslint())
    .pipe(rev())
    .pipe(gulp.dest('dist/css'))
    .pipe(rev.manifest())//- 生成一個rev-manifest.json
    .pipe(gulp.dest('rev/css'));
    
});

gulp.task("cleanImg",function(){
    return gulp.src('dist/img',{read:false})
    .pipe(clean());
});

gulp.task('imgmin',['cleanImg'], function () {
    gulp.src('src/img/**/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin()))                        //沒有修改的圖片直接從緩存文件讀取
        .pipe(rev())
        .pipe(gulp.dest('dist/img'))
        .pipe(rev.manifest())//- 生成一個rev-manifest.json
        .pipe(gulp.dest('rev/img'));
});

gulp.task("cleanJs",function(){
    return gulp.src(['dist/js/*','!dist/js/lib'],{read:false})
    .pipe(clean());
})

gulp.task('jsmin', ['cleanJs'], function () {
    gulp.src(['src/js/**/*.js','!src/js/**/*.min.js'])
        .pipe(jshint())
        .pipe(uglify())
        .pipe(rev({merge:true}))
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())//- 生成一個rev-manifest.json
        .pipe(gulp.dest('rev/js'));
        
    gulp.src(['src/js/lib/**/*.js'])
        .pipe(gulp.dest('dist/js/lib'))
});

gulp.task('htmlmin',function () {
    var options = {
        removeComments: true,//清除HTML注釋
        //collapseWhitespace: true,//壓縮HTML
        removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/html/**/*.html')
        .pipe(htmlmin(options))
        .pipe(rev())
        .pipe(gulp.dest('dist/html'))
        .pipe(rev.manifest())//- 生成一個rev-manifest.json
        .pipe(gulp.dest('rev/html'));
});


gulp.task('replaceURL', function(){
    gulp.src(['dist/html/**/*.html'])
        .pipe(replace('../css', '/css'))
        .pipe(replace('../js', '/js'))
        .pipe(replace('/src', '/dist'))
        .pipe(gulp.dest('dist/html'));
        
    gulp.src(['dist/css/**/*.css'])
        .pipe(replace('../css', '/css'))
        .pipe(replace('../js', '/js'))
        .pipe(replace('/src', '/dist'))
        .pipe(gulp.dest('dist/css'));
        
    gulp.src(['dist/js/**/*.js'])
        .pipe(replace('../css', '/css'))
        .pipe(replace('../js', '/js'))
        .pipe(replace('/src', '/dist'))
        .pipe(gulp.dest('dist/js'));
    
});

gulp.task('revUrl', function() {
    gulp.src(['rev/{css,img,js}/*.json', 'dist/html/**/*.html'])        //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
    .pipe(revCollector())                               //- 執行文件內css名的替換
    .pipe(gulp.dest('dist/html'));    //- 替換后的文件輸出的目錄
    
    gulp.src(['rev/{css,img,js}/*.json', 'dist/css/**/*.css'])        //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
    .pipe(revCollector())                               //- 執行文件內css名的替換
    .pipe(gulp.dest('dist/css'));    //- 替換后的文件輸出的目錄
    
    gulp.src(['rev/{css,img,js}/*.json', 'dist/js/**/*.js'])        //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
    .pipe(revCollector())                               //- 執行文件內css名的替換
    .pipe(gulp.dest('dist/js'));    //- 替換后的文件輸出的目錄
    
});

gulp.task("autowatch",function(){
    gulp.watch(['src/sass/**/*.scss'],['sass']);        //監聽sacc文件改變后，編譯、去緩存
});


/*
 *    單步步驟：
 *     1.gulp sass                    編譯scss文件
 *     2.gulp jsmin                壓縮js
 *     3.gulp imgmin                壓縮圖片
 *     4.gulp htmlmin                壓縮HTML文件
 *     5.gulp replaceURL            替換相對路徑為絕對路徑
 *     6.gulp revUrl                引用manifest給HTML添加版本號
 *     
 * 
 *     gulp sass jsmin htmlmin imgmin replaceURL revUrl
 * 
 * 
 * 
 * 如果改了scss文件：則執行：gulp sass
 * 如果改了js文件：則執行：gulp jsmin
 * 如果改了img文件：則執行：gulp imgmin
 * 
 * 只要改了HTML引用到的資源文件，最后都需要執行gulp htmlmin,gulp replaceURL,gulp revUrl，以清理緩存
 * */

根據最后的單步步驟，我們來一步步解剖說明：

var gulp = require('gulp'),
    sass = require('gulp-sass'),                        //編譯sass
    cssmin = require('gulp-clean-css'),                    //壓縮css
    autoprefixer = require('gulp-autoprefixer'),        //添加瀏覽器前綴
    rev = require('gulp-rev'),                            //添加版本號
    revCollector = require('gulp-rev-collector'),        //添加版本號
    clean = require('gulp-clean'),                        //清理文目標文件夾
    csso = require('gulp-csso'),                        //合並css屬性
    csslint = require('gulp-csslint'),                    //css語法檢查
    csscomb = require('gulp-csscomb'),                    //css 樣式表的各屬性的順序
    imagemin = require('gulp-imagemin'),                //圖片壓縮
    cache = require('gulp-cache'),                        //緩存處理
    htmlmin = require('gulp-htmlmin'),                    //壓縮html
    replace = require('gulp-replace'),                    //替換路徑
    uglify = require('gulp-uglify'),                    //壓縮js
    jshint = require('gulp-jshint')                        //js語法檢查
;

這些都是執行任務時要用到的插件，看注釋大概就知道是干嘛的了。

 

 2.1、css相關處理：運行“gulp sass”

gulp.task("cleanCss",function(){
    return gulp.src('dist/css',{read:false})
    .pipe(clean());
});

gulp.task('sass', ['cleanCss'],function () {            //執行完cleanCss任務后再執行sass任務
      gulp.src('src/sass/**/*.scss')
    .pipe(sass())
    .pipe(cssmin())
    .pipe(autoprefixer())
    //.pipe(csscomb())
    .pipe(csso())
    .pipe(csslint())
    .pipe(rev())
    .pipe(gulp.dest('dist/css'))
    .pipe(rev.manifest())//- 生成一個rev-manifest.json
    .pipe(gulp.dest('rev/css'));
    
});

gulp.task("autowatch",function(){
　　gulp.watch(['src/sass/**/*.scss'],['sass']); //監聽sacc文件改變后，編譯、去緩存
});

因為公司項目用的是sass，所以加了一個監聽任務，去編譯生成css文件，css發生更改之后先執行“cleanCss”任務，清空dist文件夾下的css文件，重點是后面的.pipe(rev.manifest())，這一步將生成一個資源文件路徑的rev-manifest.json文件，里面的內容是這樣的：

{
  "base/base.css": "base/base-c1e638e1f6.css",
  "controller/index.css": "controller/index-1454781768.css"
}

沒錯，這是用來最后在HTML文件替換css引用路徑的。

同時，dist/css目錄下也生成對應的文件：

 

2.2、img相關處理：運行“gulp imgmin”

gulp.task("cleanImg",function(){
    return gulp.src('dist/img',{read:false})
    .pipe(clean());
});

gulp.task('imgmin',['cleanImg'], function () {
    gulp.src('src/img/**/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin()))                        //沒有修改的圖片直接從緩存文件讀取
        .pipe(rev())
        .pipe(gulp.dest('dist/img'))
        .pipe(rev.manifest())//- 生成一個rev-manifest.json
        .pipe(gulp.dest('rev/img'));
});

過程就不多說啦，一樣的先清空dist的圖片文件夾，壓縮圖片，生成rev-manifest.json，生成的文件如下：

{
  "push-bg.jpg": "push-bg-6179117417.jpg"
}

 　　

 

2.3、js相關處理：運行“gulp jsmin”

gulp.task('jsmin', ['cleanJs'], function () {
    gulp.src(['src/js/**/*.js','!src/js/**/*.min.js'])
        .pipe(jshint())
        .pipe(uglify())
        .pipe(rev({merge:true}))
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())//- 生成一個rev-manifest.json
        .pipe(gulp.dest('rev/js'));
        
    gulp.src(['src/js/lib/**/*.js'])
        .pipe(gulp.dest('dist/js/lib'))
});

過程就是檢查語法，壓縮，生成rev-manifest.json，要注意的地方是min類型的文件是放在lib目錄下，是不需要壓縮處理的，直接拷貝過去即可。生成的rev-manifest.json文件如下：

{
  "base/cal.js": "base/cal-2e41f44581.js",
  "base/require-config.js": "base/require-config-3c5aeda076.js",
  "controller/index.js": "controller/index-d14ed3eca8.js"
}

 

 

 2.4、js相關處理：運行“gulp htmlmin”

gulp.task('htmlmin',function () {
    var options = {
        removeComments: true,//清除HTML注釋
        //collapseWhitespace: true,//壓縮HTML
        removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/html/**/*.html')
        .pipe(htmlmin(options))
        .pipe(rev())
        .pipe(gulp.dest('dist/html'))
});

過程省略一百字。。。

 

 2.5、替換相對路徑：運行“gulp replaceURL”

gulp.task('replaceURL', function(){
    gulp.src(['dist/html/**/*.html'])
        .pipe(replace('../css', '/css'))
        .pipe(replace('../js', '/js'))
        .pipe(replace('/src', '/dist'))
        .pipe(gulp.dest('dist/html'));
        
    gulp.src(['dist/css/**/*.css'])
        .pipe(replace('../css', '/css'))
        .pipe(replace('../js', '/js'))
        .pipe(replace('/src', '/dist'))
        .pipe(gulp.dest('dist/css'));
        
    gulp.src(['dist/js/**/*.js'])
        .pipe(replace('../css', '/css'))
        .pipe(replace('../js', '/js'))
        .pipe(replace('/src', '/dist'))
        .pipe(gulp.dest('dist/js'));
    
});

過程就是替換所有文件的相對路徑為絕對路徑。

 

2.6、替換資源文件引用（重中之重）：運行“gulp revUrl”

gulp.task('revUrl', function() {
    gulp.src(['rev/{css,img,js}/*.json', 'dist/html/**/*.html'])        //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
    .pipe(revCollector())                                               //- 執行文件內css名的替換
    .pipe(gulp.dest('dist/html'));                                        //- 替換后的文件輸出的目錄
    
    gulp.src(['rev/{css,img,js}/*.json', 'dist/css/**/*.css'])        
    .pipe(revCollector())                               
    .pipe(gulp.dest('dist/css'));    
    
    gulp.src(['rev/{css,img,js}/*.json', 'dist/js/**/*.js'])        
    .pipe(revCollector())                               
    .pipe(gulp.dest('dist/js'));    
    
});

 

3、測試結果：

打開dist/html/index.html

<!doctype html>
<html>
    <head>
        <title>requirejs</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="/css/base/base-c1e638e1f6.css">
        <link rel="stylesheet" type="text/css" href="/css/controller/index-1454781768.css">
        <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="/csstest/main.css"/>
        <![endif]-->
    </head>
    <body>
        <div class="main border-grey" id="name1">
            <div class="wrapper">未加載 index.js</div>
        </div>
        
        
        <script type="text/javascript" src="/js/base/require-config-3c5aeda076.js" defer="true"></script>
        <script data-main="/js/controller/index-d14ed3eca8.js" src="/js/lib/require.min.js" defer="true"></script>
    </body>
</html>

可以看到，css和js文件引用的路徑都替換成了相應rev-manifest.json中的值。

 

訪問一下頁面：

控制台也顯示資源文件引用正常：

3.1、修改測試

修改base.scss中body{font-size: 14px;}的字體為20px，重新執行gulp，再截圖看下控制台：

可以發現，除了base.css引用變了之外，其他保持不變。

 

4、補充：

按上面的步驟走完，gulp已經滿足項目基本需要了，但仍存在兩點問題：

1. 對通過require-config.js引入的js文件修改后，沒有更新到
2. 每次gulp運行完后都會生成新的文件，開發環境是做了清除dist目錄處理，但對於一般公司服務器而言，發布到生產環境上，不可能每次發布都對dist做清空處理，文件只會越積越多
3. 咦，怎么跟前言博客園截圖引用的方法不一樣。。。

上面這3點，將在下一節中詳解。

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

歡迎轉載，轉載請注明作者：飄飛的夏秋 和出處 http://www.cnblogs.com/chenchenghua/p/5953767.html