Task Runner - npm Scripts

[habu-ori]

◆NPMとは

• NPMは、世界最大のソフトウェアレジストリ。
• 多くのオープンソース開発者がソフトウェアを共有するためにnpmを使用している。
• プロジェクトのビルドなどのタスクを自動化するために使用される。

◆npm scriptsとは

• npm scripts は、package.json ファイルの scripts フィールドに定義でき、公開したいさまざまなコマンドやスクリプトを指定できる。

以下のコマンドで実行できる。

npm run <script-name>

• 設定例

  {
  "name": "example",
  "scripts": {
  "test": "echo 'hello world'"
  }
  }

npm run test

◆npm scriptsの使用例

• CSSタスク

  • Sass or LessをCSSにコンパイル
  • 必要なベンダープレフィックスを追加するためにAutoprefixerを実行す
  • 最小化：機能を損なうことなく、ソースコードから不要な文字（空白、改行、コメント）を削除

• JavaScriptのタスク

  • JSHint：JavaScriptのコードにエラーや潜在的な問題がないかチェック（静的コード解析）
  • 連結
  • Uglification：最小化＋マングリング（ローカル変数を一文字にする）
  • エラーの再チェック

• プロジェクトの構築

  • プロジェクトは、必要なすべてのファイルとフォルダ、およびいくつかの依存関係で構成されています
  • rimraf, copyfiles, usemin, cssmin, htmlmin, uglifyjsなどのパッケージが使用されています

• 画像圧縮とブラウザシンク

  • 画像はimageminで圧縮しています。
  • onchangeやwatchを使って、変更があったときに自動的にブラウザがレンダリングされるようにしています。