npm-scriptsでejs、postcss、watchify

これまで`grunt、gulp、webpack`と、いろいろ使ってきましたが、<a href="https://t32k.me/mol/log/npm-run-script/">ご多分に漏れずなんか疲れてしまった</a>のと、npm-scripts原理主義者からの勧めもあり、`npm-scripts`に移行しようと思いたつ。

備忘録も兼ねて導入手順を書いておきます。
これまでは`gulp`で`ejs`をコンパイルしてきたので、なるべくならその環境に近いものを作りたい。

階層構造はこんな感じを想定しています。

````
.
├── dist
│   ├── css
│   │   └── style.css
│   └── js
│       ├── bundle.js
│       └── bundle.min.js
├── src
│   ├── css
│   │   ├── _item.pcss
│   │   └── style.css
│   ├── ejs
│   │   ├── common
│   │   │   ├── _footer.ejs
│   │   │   └── _head.ejs
│   │   └── index.ejs
│   └── js    
│       ├── app.js
│       └── sub.js
├── .postcssrc.json
└── package.json
````

ルートの階層で

`$ npm init`

全部Enter

## ejsによるhtmlのコンパイル

`$ npm install ejs-cli -D`

最終的に全て`npm run`コマンドで叩けるようにするので、ローカルインストール。
グローバルインストールとローカルインストールの違いについていまいち理解してなかったので、<a href="http://qiita.com/Mic-U/items/cd456d6bea72937464f8">こちら</a>を参考にしました。

以下コマンドで動けばOK。

`$ ./node_modules/.bin/ejs-cli --base-dir src/ejs '*.ejs' --out dist/`

毎回`node_modules`からコマンドを叩くのは面倒なので、`npm run`から動くようにします。

````json:package.json
"scripts": {
    "ejs": "ejs-cli --base-dir src/ejs '*.ejs' --out dist/"
  },
````

`$ npm run ejs`

`index.html`の出力が確認できればejsは終わりです。


## postcssによるcssのコンパイル

これまでずっと`sass`を使ってきましたが、にわかに`postcss`への流れがありそうなので今回は`postcss`にしてみます。
`postcss`をローカルインストール。

`$ npm install postcss-cli -D`

以下コマンドで動けばOK。
※もしエラーがでる場合は、`package.json`の`postcss`のバージョンを`"^2.6.0"`して`npm install`した後にもう一度コマンドを叩いてください。
原因はわかりませんが、このバージョンにしたら動きました…

この段階では`postcss`の記述から`css`の記述へコンパイルされていなくて問題ありません。

`$ ./node_modules/.bin/postcss --dir dist/css/ src/css/*.css`

次に、`postcss`に`@import`機能を追加します。

`$ npm install postcss-import -D`

システムファイルを追加します。

````json:.postcssrc.json
{
  "use": [
    "postcss-import"
  ]
}
````

`_item.css`を用意し適当な記述をして、`style.css`に読み込ませます。

````css:style.css
@import '_item.pcss';
````

以下コマンドを叩く。

`$ ./node_modules/.bin/postcss --config .postcssrc.json --dir dist/css/ src/css/*.css`

`_item.pcss`の記述が`style.css`に展開されたと思います。
このコマンドも、`npm run`で動くようにします。

````json:package.json
"scripts": {
    "ejs": "ejs-cli --base-dir src/ejs '*.ejs' --out dist/",
    "postcss": "postcss --config .postcssrc.json --dir dist/css/ src/css/*.css"
  },
````

これで、`postcss`も`npm run`のコマンドで動くようになりました。

`$ npm run postcss`

`postcss`に`nest、prefix、min`の機能を追加します。

`$ npm install postcss-nested autoprefixer csswring -D`

````json:.postcssrc.json
{
  "use": [
    "postcss-import",
    "postcss-nested",
    "autoprefixer",
    "csswring"
  ]
}
````

このままでは`css`へコンパイルするたびにコマンドを叩かなくてはならないので、変更を監視します。

````json:package.json
"scripts": {
    "ejs": "ejs-cli --base-dir src/ejs '*.ejs' --out dist/",
    "postcss": "postcss --config .postcssrc.json --dir dist/css/ src/css/*.css",
    "watchcss": "npm run postcss -- --watch"
  },
````

これで以下コマンドを叩けば`css`の変更を監視してくれます。

`$ npm run watchcss`


## watchifyでjsをコンパイル

<a href="http://qiita.com/fgkm/items/a362b9917fa5f893c09a">browserify</a>はどうしても重くなってしまうので、今回は`watchrify`にします。

`watchify`をローカルインストール

`$ npm install watchify -D`

以下の通り、`js`ファイルを用意します。

````js:app.js
var sub = require('./sub.js');

sub('sub.jsの処理')
console.log('hoge');
````

````js:sub.js
module.exports = function(text) {
    console.log(text);
};
````

`ejs、postcss`同様に`npm run`で動かすように`package.json`に追記

````json:package.json
"scripts": {
    "ejs": "ejs-cli --base-dir src/ejs '*.ejs' --out dist/",
    "postcss": "postcss --config .postcssrc.json --dir dist/css/ src/css/*.css",
    "watchcss": "npm run postcss -- --watch",
    "watchify": "watchify --entry src/js/app.js --outfile dist/js/bundle.js --verbose"
  },
````

`$ npm run watchify`

リリース用に`min`化します。

`$ npm install uglify-js -D`

````json:package.json
"scripts": {
    "ejs": "ejs-cli --base-dir src/ejs '*.ejs' --out dist/",
    "postcss": "postcss --config .postcssrc.json --dir dist/css/ src/css/*.css",
    "watchcss": "npm run postcss -- --watch",
    "uglify": "uglifyjs --compress warnings=false --mangle --output dist/js/bundle.min.js -- dist/js/bundle.js",
    "watchify": "watchify --entry src/js/app.js --outfile dist/js/bundle.js --verbose"
  },
````

`$ npm run uglify`

これで環境設定は終了です。

`ejs`も`watch`できないかなと探してみたのですが方法がわからず…
まだまだ若輩者ゆえ、なんか間違ってるよ。等ありましたらコメントいただけると幸いです。