質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

2回答

1533閲覧

Gulpでキャッシュ対策パラメータを自動付与

noel0718

総合スコア20

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/02/09 15:06

編集2022/01/12 10:55

gulpでキャッシュ対策のために
ファイル末尾に?hogeとクエリー文字列を付与する処理をつけております。
function cache() {}内です。

例えば
scssを更新するごとに/include/のheader.htmlで呼んでいる

<link rel="stylesheet" href="/css/style.css?rev=e1e37390ef2c8dbc"> を <link rel="stylesheet" href="/css/style.css?rev=aaaaaaaaaaaaaaaa"> のようにまた別のパラメータに書き変えたいのですが、そのようなことは可能なのでしょうか?

cacheを実行すれば、一度パラメータがつくのですが、
現状として、一度パラメータがついてしまうとパラメータを再度更新することができないので、付与されたパラメータの記述を削除して、再度cacheを実行という原始的なことをしてます・・。

パラメータについてはこちらの記事を参考に入れました。
https://qiita.com/alice37th/items/535c860a7da35c9c04ff

// ---------------------------------------- // require // ---------------------------------------- const gulp = require('gulp'); //gulp本体 const sass = require('gulp-sass'); //sassのコンパイル const plumber = require('gulp-plumber'); //エラー時の強制終了を防止 const notify = require('gulp-notify'); //エラー発生時にデスクトップ通知する const sassGlob = require('gulp-sass-glob'); //@importの記述を簡潔にする const postcss = require('gulp-postcss'); //autoprefixerとセット const autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与 const rename = require('gulp-rename'); //出力先のディレクトリを変更 const saveLicense = require('uglify-save-license'); //ライセンスコメントを残す const replace = require('gulp-replace'); //文字列の置換や削除 const crypto = require('crypto'); //乱数をcryptoで生成 const sourcemaps = require('gulp-sourcemaps'); //ソースマップ // ---------------------------------------- // 乱数生成 // ---------------------------------------- const revision = crypto.randomBytes(8).toString('hex'); // ---------------------------------------- // paths // ---------------------------------------- const paths = { root: './', styles: { src: './css/**/*.scss', dest: './css/', }, }; // ---------------------------------------- // sass // ---------------------------------------- function styles() { return gulp.src( paths.styles.src, { sourcemaps: true }) .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) ) //エラーチェック .pipe( sassGlob() ) .pipe( sass({ outputStyle: 'compressed' }) ) .pipe( postcss([ autoprefixer({ "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"], cascade: false } ) ]) ) .pipe( gulp.dest(paths.styles.dest, { sourcemaps: true })); } // ---------------------------------------- // cache // ---------------------------------------- function cache() { return gulp.src('./include/*.html') .pipe( replace('.css"','.css?rev=' + revision + '"') ) .pipe( gulp.dest('./include/') ); } function watch() { gulp.watch(paths.styles.src, styles); } exports.build = gulp.series( gulp.parallel(styles), gulp.parallel(cache), ); exports.default = gulp.series( gulp.parallel(styles), gulp.parallel(cache), gulp.parallel(watch), );

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

2点変更すればやりたいことが実現できるかと思いました。

  1. revisioncacheタスクの中に入れてタスクが実行される度にクエリパラメータを更新
  2. gulp.watchでSassファイルの変更を検知してコンパイルする作業と一緒に上記cacheタスクも実行

gulp.watchの第2引数にはgulp.seriesで複数のタスクを指定することも可能です。

これでSassファイルが更新される度にクエリパラメータの値も更新されるのではないでしょうか。

js

1function cache() { 2 const revision = crypto.randomBytes(8).toString("hex"); 3 4 return gulp.src('./include/*.html') 5 .pipe( replace('.css"','.css?rev=' + revision + '"') ) 6 .pipe( gulp.dest('./include/') ); 7} 8 9function watch() { 10 gulp.watch(paths.styles.src, gulp.series(styles, cahce)); 11}

投稿2020/02/19 10:17

shgtkshruch

総合スコア665

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

noel0718

2020/07/16 13:58

ご回答ありがとうございます。 やってみましたが、更新されませんでした・・・。
guest

0

gulpにreplaceというプラグインがあります。正規表現が使えるので便利ですがいかがでしょう?

gulp.src(['file.txt']) .pipe(replace(/foo(.{3})/g, '$1foo')) .pipe(gulp.dest('build/file.txt'));

訂正
あ、もう使っているのですね。回答は無視してください。
失礼しました。

投稿2020/02/09 15:19

編集2020/02/09 15:21
technocore

総合スコア7200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問