前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。
てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメージとしてはphpのphingやJavaのAnt 近いかと。
例 package.json
下記リンクを参考にしました。
Bootstrap 4 のビルドツールは npm-scripts で決まり
github https://github.com/creativewebjp/Bootstrap4Sample
|
1 2 3 4 5 6 |
"scripts": { "css": "npm-run-all css-compile css-prefix css-minify", "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/custom.scss dist/css/custom.css", "css-prefix": "postcss --config node_modules/bootstrap/build/postcss.config.js --replace dist/css/*.css", "css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/custom.min.css dist/css/custom.css" }, |
ライブラリをインストールし、npm run cssで実行できます。
解説
リンクのほうがわかりやすいですが(汗)自分のためにメモを。
npm run cssでcssというタスクを実行します。cssは1行目をみればわかりますがnpm-run-all css-compile css-prefix css-minifyの4つのタスクを実行します。
このように複数のタスクを実行するためにはnpm-run-allというライブラリを入れておく必要があります。
css-compileはnode-sassというライブライリを使って
src/custom.scssというソースをもとにして、
- –output-style expanded
- –source-map true
- –source-map-contents true
- –precision 6
上記のようにオプションを設定し、
dist/css/custom.cssというファイルをコンパイルします。
※css-compile以下のタスクも基本的にはコマンドラインで実行することをpackage.jsonに記述しています。
