夢は小さいほどいいと思っているんです。本気になれるから。

夢を持つことが大事なんじゃなく、本気になるのが大事。(糸井重里)

gulp初心者がなんとなく使えるようになるためのまとめ_2(gulpのプラグインを使ったタスクの書き方)

f:id:pbrsk:20170307222121j:plain

この記事の執筆時点のgulpのバージョンは3.9.1です。

gulpが持つ基本的な機能

gulpのタスクはgulpが用意しているAPI(機能)を使って書いていきます。

gulp.task

タスクを作る時に使う関数です。gulp.task('taskName', function)という形式で、タスク名と処理を指定します。

また、gulp.task('taskName', ['beforeTask1', 'beforeTask2', ...], function)というふうに、このタスクの前に実行させたいタスク(依存タスク)を指定することができます。
依存タスクは配列形式で複数指定することができますが、このとき指定されたタスクは並列に実行されます。実行の順番を保証する必要があるタスクを指定する場合には注意が必要です。

gulp.src

タスクで処理(編集)するファイルを指定する関数です。開発用のディレクトリを指定します。主に使うのは次のようなパターンかと。

指定対象表記例
ファイルを直接指定'css/main.css'
フォルダ名と拡張子で指定'css/*.css'
サブフォルダも含めて拡張子で指定'css/**/*.css'
除外したいファイルをフォルダ名と拡張子で指定'!css/exclude/*.css'

.pipe

処理を繋ぐために使う関数です。gulp.srcで作成したストリームを.pipe(function())で繋いでいきます。

gulp.dest

gulp.pipeを使って行ったストリーム(処理した結果)を、指定したフォルダに出力します。指定したフォルダが存在しない場合には自動的に作成します。

gulp.watch

ファイルの変更を監視する関数です。監視するファイルと、変更があったときに実行するタスク、もしくは関数を指定します。

gulp.watch('css/**/*.css', ['css']);

この例は、サブフォルダまで含めたcssフォルダ配下の.cssという拡張子を持つファイルを監視し、変更があればcssというタスクを実行します。

タスクの基本的な流れは、次のようになります。

  1. gulp.srcでファイルを読み込む
  2. .pipeで処理を繋ぐ
  3. gulp.destで出力する

これらの処理をgulp.taskの中に設定し、開発中などはgulp.watchでファイルの変更を監視して、設定したタスクを実行する、といった流れになります。

gulp自体が持っている機能は基本的にこれだけです。実際にファイルに対して行う処理はプラグインや関数の役割となっています。

プラグインを使ったタスクを使えるようにする手順

プラグインをインストールする

下記から目的に合うプラグインを探す。
http://gulpjs.com/plugins/

$ npm install --save-dev プラグイン名

プラグインを使えるように宣言する

gulpfile.jsの中でそのパッケージを使うことを明示的に宣言します。
宣言にはrequireメソッドを使います。書式は次のようになります。

var pluginName = require('plugin-name');

pluginNameの部分は好きな名前を付けられます。plugin-nameの部分はinstallした際に指定した名前を入れます。gulp-stylusを使う場合は次のようになります。

var gulp = require('gulp');
var stylus = require('gulp-stylus')

/**
 * 開発用のディレクトリを指定します。
 */
var src = {
  // 出力対象は`_`で始まっていない`.pug`ファイル。
  'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'],
  // JSONファイルのディレクトリを変数化。
  'json': 'src/_data/',
  'css': 'src/**/*.css',
  'sass': ['src/**/*.scss', '!src/**/_*.scss'],
  'js': 'src/**/*.js',
  'stylus': 'src/styl/**/*.styl',
};

/**
 * 出力するディレクトリを指定します。
 */
var dest = {
  'root': 'dest/',
  'html': 'dest/'
};

gulp.task('stylus', function() {
  return gulp.src(src.stylus, {base: src.root})
    .pipe(stylus())
    .pipe(gulp.dest(dest.root + 'css/'));
});

このタスクはstylフォルダに入っている.stylファイルをコンパイルし、cssフォルダに出力します。
gulp.srcで処理する対象を指定し、.pipeでstylus()を実行しgulp.destに出力します。
このタスクを実行するには、次のコマンドを実行します。

$ gulp stylus

StylusのコンパイルをしたあとにCSSを結合・圧縮するように変更する

StylusのコンパイルのあとにCSSファイルの結合と圧縮を行うようにタスクを変えてみます。

  • 結合にはgulp-concat
  • 圧縮にはgulp-minify-css

を使います。

また、圧縮したCSSファイルの名前を変えたいのでgulp-renameも合わせて使います。

次のコマンドを実行してプラグインをインストールします。

$ npm i -D gulp-concat gulp-minify-css gulp-rename

*注:複数のパッケージをまとめてインストールする
npm installは空白区切りで複数のパッケージを指定して、まとめてインストールすることができます。

Stylusのコンパイル > CSSの結合 > CSSの圧縮 > ファイルのリネームという順番で実行するように書いてみます。

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var concat = require('gulp-concat');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

/**
 * 開発用のディレクトリを指定します。
 */
var src = {
  // 出力対象は`_`で始まっていない`.pug`ファイル。
  'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'],
  // JSONファイルのディレクトリを変数化。
  'json': 'src/_data/',
  'css': 'src/**/*.css',
  'sass': ['src/**/*.scss', '!src/**/_*.scss'],
  'js': 'src/**/*.js',
  'stylus': 'src/styl/**/*.styl',
};

/**
 * 出力するディレクトリを指定します。
 */
var dest = {
  'root': 'dest/',
  'html': 'dest/'
};

gulp.task('stylus', function() {
  return gulp.src(src.stylus, {base: src.root})
    .pipe(stylus())
    .pipe(concat('all.css'))
    .pipe(minify())
    .pipe(rename({extname: '.min.css'}))
    .pipe(gulp.dest(dest.root + 'css/'));
});


次のコマンドを実行すると、Stylusがコンパイルされ、ファイルが分かれていたCSSを1ファイルにして、CSSの圧縮(minify)してファイルのリネーム(.min)される。

$ gulp stylus
  • Stylusのコンパイル
  • ファイルの結合
  • CSSの圧縮(minify)してファイルのリネーム(.min)

それぞれのタスクの後に、destに出力する下記のコマンドを差し込めば

.pipe(gulp.dest(dest.root + 'css/'))
  • Stylusのコンパイルされたファイル
  • ファイルの結合されたファイル
  • CSSの圧縮(minify)してファイルのリネーム(.min)されたファイル

が手に入ります。

全体的なgulpfileは下記

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var concat = require('gulp-concat');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

/**
 * 開発用のディレクトリを指定します。
 */
var src = {
  // 出力対象は`_`で始まっていない`.pug`ファイル。
  'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'],
  // JSONファイルのディレクトリを変数化。
  'json': 'src/_data/',
  'css': 'src/**/*.css',
  'sass': ['src/**/*.scss', '!src/**/_*.scss'],
  'js': 'src/**/*.js',
  'stylus': 'src/styl/**/*.styl',
};

/**
 * 出力するディレクトリを指定します。
 */
var dest = {
  'root': 'dest/',
  'html': 'dest/'
};

gulp.task('stylus', function() {
  return gulp.src(src.stylus, {base: src.root})
    .pipe(stylus())
    .pipe(gulp.dest(dest.root + 'css/'))
    .pipe(concat('all.css'))
    .pipe(gulp.dest(dest.root + 'css/'))
    .pipe(minify())
    .pipe(rename({extname: '.min.css'}))
    .pipe(gulp.dest(dest.root + 'css/'));
});

ファイルを監視してタスクを実行(watchタスク)

Stylusのコンパイル > CSSの結合 > CSSの圧縮 > ファイルのリネームという順番で実行するタスクを書いてみましたが、更新(編集を保存する)のたび手作業でタスクを実行(gulp stylus)するのは手間だと思います。ファイルの更新があったときに、自動でタスクを実行してくれるようにしてみましょう。

gulpfileにgulp.watchを使ってファイルを監視するwatchタスクを追加します。

gulp.task('watch', function() {
  gulp.watch(src.stylus, ['stylus']);
});

コマンからwatchタスクを実行すると、監視待機状態になります。

$ gulp watch
[22:16:56] Using gulpfile ~/Dropbox/develop/gulp_test/gulpfile.js
[22:16:56] Starting 'watch'...
[22:16:56] Finished 'watch' after 12 ms

この状態でstylフォルダ以下の.stylファイルを変更して保存するとstylusタスクが実行されます。