Gulp4.0クイックスタート

gulp-4プログラミング
スポンサーリンク

Gulpの動作確認

本記事を執筆時のnode、npm、npxのバージョンは以下となります。

$ node --version
v12.11.1
$ npm --version
6.11.3
$ npx --version
6.11.3

プロジェクトディレクトリを作成し、移動します。

$ mkdir gulp-project
$ cd gulp-project

package.jsonファイルを作成しgulpパッケージをインストールします。

$ npm init
$ ls
package.json
$ npm install --save gulp

gulpのバージョンを確認します。

$ gulp --version
CLI version: 2.2.0
Local version: 4.0.2

gulpfileを作成する。

テキストエディターを使用して、プロジェクトルートに次の内容のgulpfile.jsという名前のファイルを作成します。以下サンプルコード(何もしません)。

// gulpfile.js
function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

プロジェクトディレクトリでgulpコマンドを実行します。

$ gulp
 [01:38:12] Using gulpfile ~/gulp-project/gulpfile.js
 [01:38:12] Starting 'default'…
 [01:38:12] Finished 'default' after 1.32 ms

タスク(Gulpによって実行する内容)を作成する。

エクスポート

タスクはpublic、privateの2種類があります。

  • publicタスクはgulpfile.jsからエクスポートされるため、gulpコマンドで実行できます。
  • privateタスクは内部で使用されるため、gulpコマンドでは実行できません。
// gulpfile.js
const { series } = require('gulp');
// privateタスク
function clean(cb) {
  cb();
}
// publicタスク
function build(cb) {
  cb();
}
// "build"はgulpfileからエクスポート
exports.build = build;
exports.default = series(clean, build);
12:32:59 ~/gulp-project
$ gulp --tasks
[12:33:15] Tasks for ~/gulp-project/gulpfile.js
[12:33:15] ├── build
[12:33:15] └─┬ default
[12:33:15]   └─┬ <series>
[12:33:15]     ├── clean
[12:33:15]     └── build

12:33:15 ~/gulp-project
$ gulp build
[12:40:54] Using gulpfile ~/gulp-project/gulpfile.js
[12:40:54] Starting 'build'...
[12:40:54] Finished 'build' after 1.43 ms

12:40:54 ~/gulp-project
$ gulp clean
[12:41:03] Using gulpfile ~/gulp-project/gulpfile.js
[12:41:03] Task never defined: clean
[12:41:03] To list available tasks, try running: gulp --tasks

“gulp –tasks”でgulpfile.jsのタスク内容を確認することができます。

“gulp build”はpublicタスクのため、実行することができます。

対して”gulp clean”はprivateタスクのため、実行することができません。

タスクを実行する大きく2種類のメソッド

  • series()・・・タスクを順番に実行する。
  • parallel()・・・タスクを同時に実行する。

ここまでで大枠でGulpが使えるようになりました。プラグインを導入する前にもう少し掘り下げてみます。

Gulp APIを確認する。

src()、dest()、symlink()、lastRun()、series()、parallel()、watch()、task()**、registry()、tree()、Vinyl、Vinyl.isVinyl()、Vinyl.isCustomProp()等々が用意されています。

例として、Bulmaパッケージをインストールします。

$ npm install --save bulma

すると、プロジェクトディレクトリのルート上の”node_modules”に”bulma”が追加されます。

src()とdest()を使う

// gulpfile.js
const gulp = require('gulp');

// node_modules配下のbulmaディレクトリ
var bulmaPath = 'node_modules/bulma';

// bulma配下のcssファイルのコピー
function copyCss() {
  return gulp.src(bulmaPath + '/*/*.css')
    .pipe(gulp.dest('bulma/'));
}

// bulma配下のsassファイルのコピー
function copySass() {
  return gulp.src(bulmaPath + '/*.sass')
    .pipe(gulp.dest('bulma/'))
    .pipe(gulp.src(bulmaPath + '/*/*/*.sass'))
    .pipe(gulp.dest('bulma/'));
}

exports.copy = gulp.series(copyCss, copySass);

publicタスクとして”copy”をエクスポートしているので”gulp copy”で実行できます。※series()でcopyCss、copySassを順番に実行しています。

$ gulp copy
[15:40:24] Using gulpfile ~/gulp-project/gulpfile.js
[15:40:24] Starting 'copy'...
[15:40:24] Starting 'copyCss'...
[15:40:24] Finished 'copyCss' after 20 ms
[15:40:24] Starting 'copySass'...
[15:40:24] Finished 'copySass' after 73 ms
[15:40:24] Finished 'copy' after 95 ms

すると、gulp-project配下にbulmaディレクトリが作成され、内部に”node_modules”からコピーしてきたBulmaのcss、sassファイルがコピーされます。

symlink()を使う

inputディレクトリ配下の.jsファイルをoutputディレクトリにショートカットとして作成します。

// gulpfile.js
const { src, symlink } = require('gulp');

function link() {
  return src('input/*.js')
    .pipe(symlink('output/'));
}

exports.link = link;

lastRun()を使う

これはwatch()と共に使用することで役に立ちます。

watch()対象のファイルが変更されていない場合、タスクをスキップして後続タスクを実行していきます。以下の例ではimagesタスクしかないため、効果は少ないですが、watch()対象の数が多ければ多いほど効果が高くなります。

// gulpfile.js
const { src, dest, lastRun, watch } = require('gulp');
const imagemin = require('gulp-imagemin');

function images() {
  return src('src/images/**/*.jpg', { since: lastRun(images) })
    .pipe(imagemin())
    .pipe(dest('build/img/'));
}

exports.default = function() {
  watch('src/images/**/*.jpg', images);
};

To list available tasks, try running: gulp –tasks

これはprivateタスクのため実行することができていません。
Gulp4からは.taskは非推奨となっているため、gulpfile.jsの最後の方でexportsすることで解決できます。

exports.<< 実行したいタスク名 >> = << 実行したいタスク名 >>;

コメント