gulpデビュー - Nukindex 開発ブログ

「Reactデビュー」と言う題で書き始めたが、道が遠いので「gulpデビュー」に変えた。

gulpというのはタスクランナーの一種で、現在最も主流であるらしい。感覚的には開発の面倒なことを自動化してくれるお助けツールだ。一部では脱gulpの動きもあるようだが、どうも便利そうなので使っておきたい。

作成したもの

gulp build コマンド

期待する動き

source ディレクトリのファイルを build ディレクトリへ移動する

結果

成功

手順など

npmの初期化

> npm init

gulp のパッケージをインストール

gulp 自体も ES2015+ で書きたいのでそのためのパッケージもインストール

> npm install babel --save-dev
> npm install babel-preset-es2015 --save-dev
> npm install gulp --save-dev
> npm install gulp-babel --save-dev

必要なディレクトリ、ファイルを作成

ROOT_DIRECTORY/
  + node_modules/
  + build/
  + source/
  |   + index.html
  |
  + gulpfile.babel.js
  + .babelrc
  + package.json

.babelrc

babel の設定ファイル。 babel は ES2015+ で書かれたJSファイルを古い環境でも実行できるように変換するツール。

{
  "presets": [
    "es2015"
  ]
}

gulpfile.babel.js

gulp コマンドの設定ファイル。

import gulp from "gulp";

// この部分が gulp build コマンドで動く
gulp.task("build", () => {
  buildHTML();
});

function buildHTML() {
  // gulp で操作する対象ファイルを指定
  // 返り値はストリームになるのでそれをパイプしていくとのこと（謎）
  gulp.src("source/**/*.html")
      // 最後は出力先を指定する
      .pipe(gulp.dest("build"));
}