gulp 對js\css進行md5 加密

有的服務器為了網站加載速度，會做服務器緩存，這樣就會出現代碼出現引用地址沒變，新代碼不生效，而我們又希望新代碼可以及時生效，這樣我們就需要避免緩存，當然也有很多方法，本文只介紹使用gulp-rev（對文件名加MD5后綴）和gulp-rev-collector（路徑替換）配合進行對文件名字進行md5加密.

rev會做什么：

　　根據靜態資源內容，生成md5簽名，打包出來的文件名會加上md5簽名，同時生成一個json用來保存文件名路徑對應關系。

     替換html里靜態資源的路徑為帶有md5值的文件路徑，這樣html才能找到資源路徑。

第一步: (安裝插件 )

npm install --save-dev gulp-rev gulp-rev-collector

第二步：(寫配置文件，以js文件為例)

gulp.task('scripts5', () => {
  return gulp.src('app/scripts/**/*.js')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.rev())//- 文件名加MD5后綴
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe($.rev.manifest()) //- 生成一個rev-manifest.json
    .pipe(gulp.dest('.tmp/rev/scripts')) //- 將 rev-manifest.json 保存到 rev 目錄內
    .pipe(reload({stream: true}));
});

　　

gulp.task('html5', ['styles5', 'scripts5'], () => {
  return gulp.src(['.tmp/rev/**/*.json', 'app/*.html'])//獲取rev-manifest.json和要替換的html文件
    .pipe($.revCollector({replaceReved: true}))//根據rev-manifest.json的規則替換html里的路徑，由於替換是根據rev-manifest.json規則來的，所以一定要先生成這個文件再進行替換
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false})))
    .pipe($.if('*.html', $.htmlmin({collapseWhitespace: false})))
    .pipe(gulp.dest('dist'));
});

　　主要就是那五句代碼，至此，你再執行構建項目就會有md5戳了，祝你好運！

本文標題:gulp 對js\css進行md5 加密

原創作者:Jiao Shou

發布時間:2016年10月14日 - 10:54

最后更新:2016年10月14日 - 21:09

原始鏈接:http://www.cnblogs.com/jiaoshou/p/5959568.html

許可協議:轉載本篇文章時請務必以超鏈接形式標明文章原文鏈接和作者信息。

掃描二維碼,分享此文章