きっかけ

職場には既にgulpがあったけど、一から入れたことがないので、勉強がてら試しにやってみた。

gulpとは？

CIのためのビルドツール。
処理は、タスク単位で書くことができる。
特徴は、ストリームを使ったメソッドチェーン的な記述で処理を書けるところ。
作ったタスクをつなげて、ビルドさせる。

似たツールにGruntというものがあるらしいが、利用したことがないので、ここでは言及しない。
また、gulpの基本は抑えているものとし、詳細な説明は省く。
気が向いたらまとめ記事を投稿予定。。。

準備

実施環境

ProductName: Mac OS X
ProductVersion: 10.12.3
BuildVersion: 16D32

npm

homebrewでインストール
コマンドは以下。nodeと一緒にインストールすれば、npmもインストールされるはず。

brew install node

使い方は下記を参照。

suzaku-tec.hatenadiary.jp

インストールが終わったら、プロジェクトを作る。
※後の話は、プロジェクトがある前提で進める

作り方は、以下。
リンク先の方が詳しく書いた気がするので、合わせてそちらも確認して貰えれば。

npm init -y

typescript

npm install typescript -g

別にグローバル環境である必要はないが、プロジェクトごとに使える／使えないのは、面倒なので、グローバルにインストールすることをおすすめする。
インストール完了後、tsconfig.jsonを作成する。
package.jsonがあるフォルダで、下記のコマンドを実行

tsc --init

gulp

npm install -g gulp

グローバルインストールしないと使えないので注意

その他にも、利用すべきgulpプラグインがあったので、下記のものをインストールする。

gulp-typescript
typescriptのインストールに必要
gulp-concat
一つのjsファイルにまとめるために必要
require-dir
ディレクトリ参照に必要

環境

プロジェクト直下のディレクトリ構成。
※node_moduleディレクトリは、除いてある。

├── build
│   └── gulpfile.js
├── gulpfile.js
├── index.css
├── index.html
├── index.js
├── package.json
├── path.json
├── src
│   └── index.ts
└── tsconfig.json

ここでの仕組み

gulpファイルを多段構成にしてビルドさせている。
なぜビルドファイルを分けたかと言うと、ビルド内容は時間が経つにつれて長大になりやすいので、目的に応じて分けたほうがいいと思ったから。
ビルドには./build/gulpfile.jsを使っている。
./gulpfile.jsonは、参照するgulpfileのパスを保持するだけにしている。

gulpファイルを直接指定する方法もある。
下記のような指定が可能

gulp --gulpfile ./build/gulpfile.js

./gulpfile.js

var requireDir = require('require-dir');

requireDir('./build', {
  recurse: true
});

参照するgulpfile.jsがあるフォルダを、require-dirで参照しているだけ。

./build/gulpfile.js

var gulp = require("gulp");
var typescript = require('gulp-typescript');
var concat = require('gulp-concat');

gulp.task("build", () => {
  var pj = typescript.createProject("./tsconfig.json");

  gulp.src([
      "./src/**/*.ts",
      "!./node_modules/**"
    ])
    .pipe(pj())
    .js
    .pipe(concat("index.js"))
    .pipe(gulp.dest("./"));
});

肝になっているのは、gulp.src~以降の箇所。
ここで、ビルドまでの一連の処理を実行している。
src()では、配列の一番目に対象にするファイルを正規表現で抽出している。
その次の"!./node_modules/**"で、npmで入れたファイルを対象外にしている。
そして、それで抽出できたものを、tsconfig.jsonを元にコンパイルしている。
それで終わったら、index.jsに集約させて、プロジェクトトップに出力させて終了する。

気をつけなければならないのは、パス指定はプロジェクトトップからになっていること。
このファイルがあるディレクトリからではないので、注意が必要。

実行方法

プロジェクトトップのディレクトリで、gulp buildを実行する。

個人的には、実行はすべてnpm任せにしたほうが、コマンド集約できるので、npmコマンドで実行できるようにしている。
やり方は、package.jsonのscriptに、ビルドコマンドを追加するだけ。
下記の例では、npm run buildを実行すればgulp buildをしたのと同じになる。

{
  "name": "localink",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-typescript": "^3.1.6",
    "require-dir": "^0.3.1",
  }
}