gulp v4 ことはじめ 基本の基本

理解しやすいよう、ステップに分けて解説。
babel を使い、ES2015 (ES6) で書く。

前準備

"project/" ディレクトリをルートとし、その中で作業する。
以下、最終的なファイル構成。

project/
 ├ package.json
 ├ package.lock.json
 ├ gulpfile.babel.js
 ├ .babelrc
 ├ node_modules/
 │  └ インストールした npm パッケージ群
 ├ (style.css) // gulp の CSS タスクで style.scss から生成
 └ src/
   └ style.scss

package.json の作成 (-y は全てyes設定)
npm init -y

ES6 → ES5 のトランスパイルに必要なパッケージをインストール
npm install -D babel-core babel-preset-env
この時、package.lock.json が自動で生成される

gulpfile.babel.js、.babelrc、Sassファイルの作成
mkdir src | touch src/style.scss gulpfile.babel.js .babelrc

".babelrc" (bebel の変換設定ファイル) に以下を記述

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ]
}

gulp本体のインストール

npm install -D gulp@next
※ @nextを付けないとv3.9が入る (2018年4月8日現在)

gulp のコマンドを試してみる。
npx gulp -v → バージョンが表示される

補足：
npm 5.2 以降は npx コマンド でパッケージを直接実行できる。
gulp のグローバルへのインストールや、package.json の "scripts" 経由での実行は不要。

gulp のタスクを書く

サンプルとして、gulp-sass パッケージ を使い、SCSS から CSS に変換するタスクを書く。

gulp-sass をインストール
npm install -D gulp-sass

gulpfile.babel.js に以下を記述

import gulp from 'gulp';
import sass from 'gulp-sass';

// パスの設定 (他タスクが増えた時に管理しやすいように)
const paths = {
  css: {
    src: './src/style.scss',
    dest: './'
  }
};

// `npx gulp css` で実行される CSS タスク
export function css() {
  return gulp.src(paths.css.src)
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest(paths.css.dest));
}
css.description = '変換：SCSS → CSS'; // gulp --tasks で注釈を表示

// `npx gulp` で実行されるデフォルトタスク
export default css;

タスクの書き方は何通りかあるが、今回は関数をそのままエクスポートする書き方を使った。関数名がタスク名となる。

タスクを実行する

src/style.scss にサンプルコードを書く

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

npx gulp css で、CSS タスクを実行。
project/src/style.scss → project/style.css が生成される。
(※ "Failed to load external module @babel/register" とエラーが出るが、動作は問題ない。
babel-register をインストールしても同エラーは消えなかった)

default タスクに CSS タスクをセットしているので、npx gulp でも実行できる。

参考記事

• gulpjs/gulp: The streaming build system
• gulp/README.md at master · gulpjs/gulp
• gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ - satoyan419.com