gulpの導入手順

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

想定環境

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ファイルを作成。

test.js

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

コマンドプロンプトで作業対象ディレクトリに移動。
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 を作る。
- ファイル名はこれ固定。
- 後は中身を書く。

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

gulpfile.js

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

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