きっかけ
職場には既に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",
}
}
とりあえず、基本的なことはできた！
あとは、プロジェクトとともに成長させてゆくだけ。
参考サイト
gulpタスクの分割 - Qiita
gulp タスクをファイル分割する – アカベコマイリ
Gulp 始めてみましたのメモ – 5 – コピーと削除, ファイル・ディレクトリ « イナヅマTVログ
gulp-tscとgulp-typescriptの利用方法の違いについて - Qiita
gulpでtypscriptをコンパイルする - Qiita
俺的gulpでTypeScriptをインクリメンタルビルドする - Qiita
現場で使えるgulp入門 - gulpとは何か | CodeGrid
