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

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

掃描二維碼,分享此文章