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

bootstrapでのJavaScriptエラーチェック

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。 入力欄にフォーカスして、遷移したときに …

no image

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

JSでの画面の金額集計

主に金額などを画面で計算するような請求関係のアプリを作っていますと、JSを駆使して集計作業をすることが多いのではないかと思います。 ようはテーブルみたいなものがあり、それを集計するようなパターンです。 …

アーカイブ