gulpの導入手順

gulpを導入して若干経過したので、つまづいたことなどのまとめです。

想定環境

• Windows 7 (管理者ではない)
• コマンドプロンプト (Cygwinでは動かないコマンドがあったため)

準備

• Node.jsをインストールする。
  • node -v を入力してバージョンが表示されればOK。
• グローバルに gulp を入れる。
  • npm i gulp -g
  • gulpが入っているか不明なら、npm list -g gulp で調べられる。

通知設定の準備

• コンパイルエラーなどの通知のため、Growlというソフトを入れる。
  • MacやWindows 8の場合はOSデフォルトの通知を使えるが、Windows 7には通知機能がないため。
  • http://www.growlforwindows.com/gfw/
• インストールしたら、以下を設定する。
  • Growlの [Displays] メニューで任意の表示方法を選択。
    • [Preview] で動作チェックし、[Set as Default] で設定する。
  • Growlをインストールしたディレクトリに、パスを通す。
    • C:\Program Files (x86)\Growl for Windows
• Growlが動くかのテスト。
  • コマンドプロンプトを起動し、適当な場所に移動。
  • npm i growl でGrowlのパッケージをインストール。
  • テスト用のJSファイルを作成。

var growl = require("growl");
growl("error");

• node test.js でGrowlの [Preview] ボタンで動作チェックしたのと同じ方法で表示されればOK。

gulpファイルの作成

• コマンドプロンプトで作業対象ディレクトリに移動。
• npm init でpackage.json 作成。
  • プロジェクト名などを聞かれるので適宜入力。考えるのが面倒なら全部エンターでもOK。
  • 後で変更したい場合、エディタで編集すればOK。
• ローカルにgulpを入れる。-D で package.json に必要なパッケージとして追記。
  • npm i -D gulp
  • package.json にリポジトリなどを書いていない場合、npm WARN されるけど気にしない。
• gulpを入れたのと同様に、必要なパッケージをばしばし入れる。ばしばし。
  • npm i -D gulp-concat
  • npm i -D gulp-htmlhint
  • npm i -D gulp-jshint
  • npm i -D gulp-kss
  • npm i -D gulp-load-plugins
  • npm i -D gulp-pleeease
  • npm i -D gulp-plumber
  • npm i -D gulp-prettify
  • npm i -D gulp-sass
  • npm i -D gulp-sourcemaps
  • npm i -D gulp-uglify
• Windows 7の場合、以下は管理者権限でしかインストールできないので、管理者としてコマンドプロンプトを実行して入れる。使う場合は管理者じゃなくてOK。
  • npm i -D gulp-jsdoc
• gulpfille.js を作る。
  • ファイル名はこれ固定。
  • 後は中身を書く。

gulpfile.js

全般

• gulp ではLintなどのバリデートは監視しない。
  • 主要なエディタではLint系の機能 (パッケージ) がある。そちらを使うほうが便利。
  • 確認という作業として必要な場面があるので、gulp-htmlhint (gulp-jshint) のタスク自体は用意する。
• アンダースコアで始まるファイルは除外する。Sassのパーシャルと同じ考え方。

gulp.src([
  "src/**/*.js",
  "!src/**/_*.js"
])

パッケージ選択の際の方針

• 必要性を検討する。
• タスクを分解する。
  • 監視し随時実行したほうがよいタスクか、作業として実行したほうがよいタスクか。
  • すべて反映したほうがよいタスクか、差分のみ反映のほうがよいタスクか。