skillup

技術ブログ

JavaScript

package.jsonによるタスクの実行

投稿日:2017年11月25日 更新日:

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。

てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメージとしてはphpのphingやJavaのAnt 近いかと。

phing

例 package.json

下記リンクを参考にしました。

Bootstrap 4 のビルドツールは npm-scripts で決まり

github https://github.com/creativewebjp/Bootstrap4Sample

ライブラリをインストールし、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に記述しています。

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

npmでのjQueryライブラリの読み込み+datepickerメモ

npm経由でjQueryやDatepickerなど一般的なライブラリをrequireしてビルドする手法について。 以前も下記エントリーで書きましたが、再学習。 npmでのJSライブラリインストール&ビ …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …