Edited at

npm-scriptsでejs、postcss、watchify

More than 1 year has passed since last update.

これまでgrunt、gulp、webpackと、いろいろ使ってきましたが、ご多分に漏れずなんか疲れてしまったのと、npm-scripts原理主義者からの勧めもあり、npm-scriptsに移行しようと思いたつ。

備忘録も兼ねて導入手順を書いておきます。

これまではgulpejsをコンパイルしてきたので、なるべくならその環境に近いものを作りたい。

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

.

├── 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.jsonpostcssのバージョンを"^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"
},

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

$ npm run postcss

postcssnest、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

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

ejswatchできないかなと探してみたのですが方法がわからず…

まだまだ若輩者ゆえ、なんか間違ってるよ。等ありましたらコメントいただけると幸いです。