2016-12-19 9 views
1

gulpプラグインhttps://www.npmjs.com/package/gulp-iconfonthttps://www.npmjs.com/package/gulp-iconfont-cssを使用して、それぞれアイコンフォントとcssを生成します。フォントはChromeにキャッシュされるので、styles.cssのフォントソース文字列の最後にバージョン番号を追加します。ここで ファイルgulp生成ファイルのsrcバージョン管理

は私が変換したい生成されたCSSの一部である

@font-face { 
    font-family: "some-icons"; 
    url('/assets/fonts/some-icons.woff2') format('woff2'); 
    } 

所望の出力はsomeVersionは、タイムスタンプまたはからファイルを区別します他のいくつかのランダムな文字列である

@font-face { 
     font-family: "some-icons"; 
     url('/assets/fonts/some-icons.woff2?v=someVersion') format('woff2'); 
     } 

ですその前のバージョン。

私はgssプラグインを探しています。これはcssを解析し、src文字列の最後に "salt"を追加します。

他の解決策は、私はこのプラグインhttps://www.npmjs.com/package/gulp-modify-fileを活用するソリューションを見つけた

答えて

1

を歓迎しています。ここでは、ファイルの内容でsome-icons.woff2を探し、それをsome-icons.woff2に置き換えますか?v =タイムスタンプ

'use strict'; 

const gulp = require('gulp'); 
const modify = require('gulp-modify-file'); 

const timestamp = Math.round(Date.now()/1000); 

gulp.task('modify',()=> { 
    return gulp.src('tmp/styles.css') 
    .pipe(modify(
     (content, path, file)=> { 
     content = content.replace('some-icons.woff2', 'some-icons.woff2?v=' + timestamp); 

     return `${content}` 
     } 
    )) 
    .pipe(gulp.dest('dist')) 
}); 
関連する問題