gulpを使ったcssとjsへのtimestampの付与について教えてください！！

gulpを使って、cssとjsにtimestampを付与してキャッシュのクリアをしようと考えています。
以下のサイトの通りにやってみてですが、実行のためにyarn gulpをしたらエラーが出てしまいうまくいきませんでした。。。
https://qiita.com/alice37th/items/535c860a7da35c9c04ff

エラーは次のようになっています。

➜  lp git:(work/update-timestamp) ✗ yarn gulp
yarn run v1.12.3
$ /Users/name/lp/node_modules/.bin/gulp
/Users/name/lp/gulpfile.js:8
gulp.task('cache', function () {
^

ReferenceError: gulp is not defined
    at Object.<anonymous> (/Users/name/lp/gulpfile.js:8:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Liftoff.handleArguments (/Users/name/lp/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.execute (/Users/name/lp/node_modules/liftoff/index.js:203:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

なお、gulpfile.jsの一番下に

const crypto = require('crypto'); 
const hash = crypto.randomBytes(8).toString('hex');

gulp.task('cache', function () {
  return gulp.src([
    'dist/index.html',
    'dist/**/*.html'
  ])
  .pipe($.replace('.css"','.css?' + hash + '"'))
  .pipe($.replace('.js"','.js?' + hash + '"'))
  .pipe($.replace('.jpg"','.jpg?' + hash + '"'))
  .pipe($.replace('.png"','.png?' + hash + '"'))
  .pipe($.replace('.gif"','.gif?' + hash + '"'))
  .pipe(gulp.dest(dir.dist))
});

を貼り付けるたのち、yarn gulpをすると正常に動くのですがtimestampの付与はできていませんでした。

解決のために必要な情報がわからなかったので、不足分はご指摘いただければすぐに追加させていただきます。
どうぞよろしくお願いします。

m.ts10806

2019/02/08 04:29

PHPはどのように本件に関係しているのでしょうか

KotaroImai

2019/02/08 04:41

削除します。

行動規範の内容に同意します

回答2件

ベストアンサー

gulp-load-pluginsを使った書き方をしているので、
使わない書き方をすると動くと思います。

javascript
1gulp.task('cache', function(){
2  gulp.src(['./**/*.html'])
3    .pipe(replace('.css"','.css?' + hash + '"'))
4    .pipe(replace('.css"','.css?' + hash + '"'))
5    .pipe(replace('.js"','.js?'  + hash + '"'))
6    .pipe(replace('.jpg"','.jpg?' + hash + '"'))
7    .pipe(replace('.png"','.png?' + hash + '"'))
8    .pipe(replace('.gif"','.gif?' + hash + '"'))
9    .pipe(gulp.dest('./'));
10});