読者です 読者をやめる 読者になる 読者になる

Nukindex 開発ブログ

アダルトサイトNukindexの開発ブログです

gulpデビュー

「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"));
}

返り値はストリームになるのでそれをパイプしていくとのこと(謎)

ここな。このブラックボックス感が嫌でいつもライブラリ使わずにフルスクラッチしてるんだけど。

でもそんなこと言い出したらマシン語まで理解しないといけないような気もしてきた。 どこで妥協するかの問題か。

ここまでで gulp build コマンドが通って期待どおりの動きとなった。

調べながらだと時間がかかる。

nukindex.com