CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

gulp@4.0.0を試してみた

gulpの時期バージョンであるgulp@4.0.0を試してみた。 基本的には@3.9.1と同じだけど、新しい機能が増えたり、書き方が変わったりした部分があるので覚書。

インストール

Node.jsをインストールします。

Node.jsインストーラ

gulp@4.0.0 とgulp-sass をインストールします。

npm init -y
npm install -D gulp@4.0.0 gulp-sass

実行

//gulp-cliがインストールされている場合
gulp

//gulp-cliがインストールされていない場合
npx gulp

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');

//sassのコンパイル
gulp.task('sass', done => {
  gulp.src('*.scss')
  .pipe(sass())
  .pipe(gulp.dest('css'))
  done()
});

//完了のお知らせ
gulp.task('log', done => {
  console.log("DONE")
  done()
});

//変更を監視
gulp.task('watch', () => {
  gulp.watch('*.scss', gulp.series('sass','log'));
})

//デフォルトタスク
gulp.task("default",
  gulp.series(
    'watch'
  )
);

基本的には今までと同じですが、gulp.task にdone という引数が付いています。

//sassのコンパイル
gulp.task('sass', done => {
  gulp.src('*.scss')
  .pipe(sass())
  .pipe(gulp.dest('css'))
  done()
});

これは、コールバック関数でこれが実行されることでgulpにタスクの完了を通知しています。

タスクが1つであれば、今まで通り、return をつければ動きます。

//完了のお知らせ
gulp.task('log', () => {
  return console.log("DONE")
});

ただ、gulp log のように単体で実行した場合にエラーがでます。

The following tasks did not complete: log
Did you forget to signal async completion?

なので、コールバックを使って明示的に完了を書きましょう。

gulp.parallel or gulp.series

もう一つ違う部分があり、今までは*[‘sass’,‘log’]* と書いていました。

//変更を監視
gulp.task('watch', () => {
  gulp.watch('*.scss', ['sass','log']);
})

ですが@4.0.0からは、 タスクを同期的に処理するか、非同期に処理するかを明示的に書く必要があります。 同期、非同期を書かなければ、以下のような警告が出ます。

watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)

非同期処理はgulp.parallel 、同期処理はgulp.series を使います。

今回の場合は、sassのコンパイルが終わったらlogを実行したいので、gulp.series を使います。

//変更を監視
gulp.task('watch', () => {
  gulp.watch('*.scss', gulp.series('sass','log'));
})

ちなみに、並列の場合は

//変更を監視
gulp.task('watch', () => {
  gulp.watch('*.scss', gulp.parallel('sass','log'));
})

sassとlogは非同期で、doneは同期で実行する場合は以下のようになります。

//変更を監視
gulp.task('watch', () => {
  gulp.watch('*.scss',  
  gulp.series(
    gulp.parallel("sass", "log"),
    "done"
  ));
})
TOPへ戻る