gulpの初期設定

2016-08-02

gulpの初期設定

少し前まではgruntを使って、webサイトのファイルなどを動的に生成していた。しかしgulpの方が設定やgulpスクリプトがすっきり書けるということでgulpに移行した。 nodeアプリやモジュールの作成でgulpを使う場合の初期設定について書いてみる。なお下記を前提とする。

設定、スクリプトはcoffeescriptで書く。
node initなどnode.jsの初期化は完了しているものとする。

フォルダの構成

以下はあるプロジェクトフォルダのgulpに関するフォルダとファイルを抜粋したものである。

project_folder
├── 📁gulp
│   ├── config.coffee
│   └── 📁tasks
│       ├── sass.coffee
│            :
├── gulpfile.coffee
├── 📁node_modules
└── package.json

gulpフォルダ

gulpフォルダには、gulpスクリプト全体に共通する設定を書いたconfig.coffeeと、tasksフォルダを用意する。そして、tasksフォルダにgulpスクリプトを置く。(上記の例だと、scssファイルをcssに変換する処理を書いたsass.coffeeがtasksフォルダに置かれている)

gulpfile.coffee

gulpfile.coffeeに書かれた内容は下記だけである。これで、gulp/tasksフォルダ以下にある全てのスクリプトを自動で認識して実行できるようになる。例えば、上記のsass.coffeeには”sass”という名前のgulpスクリプトが登録されている。gulp sassとすると実行できる。

gulpfile.coffee

1requireDir = require('require-dir')
2requireDir('./gulp/tasks', { recurse: true })

config.coffee

gulp/config.coffeeには、gulpスクリプト全体に共通する設定を記入する。json形式で好きなように設定を書く。 gulpスクリプトでは、あるフォルダの内容を処理して公開フォルダへとコピーするといった処理が多いと思う。下記の例では、srcとdestで元ファイルのフォルダと公開フォルダを指定するような設定を書いている。

gulp/config.coffee

1module.exports = {
2  src: './src'
3  dest: './app'
4  :
5  :
6}

こうすることで、例えば下記の様にconfig.coffeeを読み込んで、config.srcの様に参照ができるようになる。

gulp/tasks/sass.coffee

1fs = require('fs')
2gulp = require('gulp')
3config = require('../config')    # config.coffeeを読み込む
4
5gulp.task 'sass', ->
6  files = fs.readdirSync(config.src + '/scss')  ## config.srcの様にして参照できる
7  :
8  :

package.json

gulpを最初に設定した時のpackage.jsonの中身は下記のようになっている。

npm i coffee-script gulp require-dir -D`

を実行すれば、package.jsonには自動的に下記が追加される。

package.json

1{
2  :
3  "devDependencies": {
4    "coffee-script": "^1.10.0",
5    "gulp": "^3.9.1",
6    "require-dir": "^0.3.0"
7  }
8}