npm-scriptsでejs、postcss、watchify

11658 ワード
watchify npm-scripts ejs postcss ejs テキストリンク

これまでgrunt、gulp、webpackと、いろいろ使ってきましたが、ご多分に漏れずなんか疲れてしまったのと、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コマンドで叩けるようにするので、ローカルインストール。
グローバルインストールとローカルインストールの違いについていまいち理解してなかったので、こちらを参考にしました。

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

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

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

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

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

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

_item.cssを用意し適当な記述をして、style.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で動くようにします。

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

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

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

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をコンパイル

browserifyはどうしても重くなってしまうので、今回はwatchrifyにします。

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

$ npm install watchify -D

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

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

sub('sub.jsの処理')
console.log('hoge');
sub.js
module.exports = function(text) {
    console.log(text);
};

ejs、postcss同様にnpm runで動かすようにpackage.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

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できないかなと探してみたのですが方法がわからず…
まだまだ若輩者ゆえ、なんか間違ってるよ。等ありましたらコメントいただけると幸いです。