gulp給檔案後新增md5時間戳

2022-03-07 12:58:01 字數 3810 閱讀 1498

這裡為總的方法,實際專案中拷貝出來的,底下有詳細的總結以及只針對新增時間戳的方法1//

引入 gulp及元件

2var gulp = require('gulp'),

3 autoprefixer = require('gulp-autoprefixer'),

4 minifycss = require('gulp-minify-css'), //

壓縮css

5 jshint = require('gulp-jshint'), //

js**校驗

6 uglify = require('gulp-uglify'), //

壓縮js

7 imagemin = require('gulp-imagemin'), //

壓縮8 rename = require('gulp-rename'), //

重新命名檔案

9 concat = require('gulp-concat'),//

檔案合併

10 notify = require('gulp-notify'),//

提示資訊

11 cache = require('gulp-cache'),

12 livereload = require('gulp-livereload'),

13 del = require('del'),

14 htmlmin = require('gulp-htmlmin'),//

壓縮html**

15 rev = require('gulp-rev'),//新增時間戳

16 revcollector = require('gulp-rev-collector');//時間戳新增後再html 裡面替換原有的檔案

17//

建立任務: styles

18 gulp.task('styles', function

() ))

23.pipe(minifycss())

24.pipe(rev())

25 .pipe(gulp.dest('dist/styles'))

26.pipe(rev.manifest())

27 .pipe(gulp.dest('./rev'))

28.pipe(notify());

31});

//給css檔案後新增時間戳

32 gulp.task('rev', function

() );

40 gulp.task('default', ['styles', 'rev']);

41//

建立任務: htmlmin

42 gulp.task('htmlmin', function

() ))

48 .pipe(htmlmin())

49 .pipe(gulp.dest('dist'))

50.pipe(notify());

53});

54//

scripts

55 gulp.task('scripts', function

() ))

63.pipe(uglify())

64 .pipe(gulp.dest('dist/scripts'))

65.pipe(notify());

68});

69//

images

70 gulp.task('images', function

() )))

77 .pipe(gulp.dest('dist/images'))

78.pipe(notify());

81});

8283

//clean 任務執行前,先清除之前生成的檔案

84 gulp.task('clean', function

(cb) );

87//

default task 設定預設任務

88 gulp.task('default', ['clean'], function

() );

91//

監聽檔案: watch

92 gulp.task('watch', function

() );

97//

watch .scss files

98 gulp.watch('src/styles/**/*.css', ['styles']);

99//

watch .js files

100 gulp.watch('src/scripts/**/*.js', ['scripts']);

101//

watch image files

102 gulp.watch('src/images/**/*', ['images']);

103//

create livereload server

104livereload.listen();

105//

watch any files in dist/, reload on change

106 gulp.watch(['dist/**']).on('change', livereload.changed);

107 });

執行新增時間戳

gulp styles 

這局執行後會將所有的css壓縮並加上時間戳。

gulp rev

這句執行後會將html裡面的路徑替換成加了時間戳的。

對比之前的結構 已經在根目錄下生成rev這個檔案,該檔案下 有乙個rev-manifest.json檔案,我們可以看看該檔案的**如下:

2、對於沒有使用css3字首的可以使用gilp 自動加上字首,外掛程式是

gulp-autoprefixer

3、總結

需要用到的兩個外掛程式

var rev = require('

gulp-rev

');//

新增時間戳

var revcollector = require('

gulp-rev-collector

');//

時間戳新增後再html 裡面替換原有的檔案

配置檔案中這樣便攜,在平常使用中不執行新增時間戳這個方法,只有在每次專案發布的時候執行這個方法就行

/*

**css js 動態新增版本號***

*/gulp.task(

"cleantime

",function())

gulp.task(

'styles

', function() );

gulp.task(

"cleanjstime

",function())

gulp.task(

'jstimeadd

', function() );

gulp.task(

'rev

', function() );

//總的版本號新增

gulp.task('

addtime

',['

cleantime

', '

styles

','cleanjstime

','jstimeadd

', '

rev']);

檔案md5加密

計算檔案的 md5 值 要計算 md5 值的檔名和路徑 md5 值16進製制字串 public static string md5file string filename 計算檔案的雜湊值 要計算雜湊值的檔名和路徑 演算法 sha1,md5 雜湊值16進製制字串 public static stri...

檔案MD5校驗

1.什麼是md5 md5訊息摘要演算法 英語 md5 message digest algorithm 一種被廣泛使用的密碼雜湊函式,可以產生出乙個128位 16位元組 的雜湊值 hash value 用於確保資訊傳輸完整一致。md5由美國密碼學家羅納德 李維斯特 ronald linn rives...

計算檔案的md5

本地配置檔案,或要做熱更的檔案,通過計算檔案md5與儲存在伺服器端的值做對比,如果不一致則說明本地檔案過舊,或者被非法修改過。算檔案md5方法為 讀取檔案為二進位製流,算出md5值轉為字串。using system using system.collections.generic using sys...