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

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

JavaScriptでの時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …

no image

JavaScriptのcookieに関して

今までCookieの管理などはPHP側でやることが多かったのですが、JavaSciprtで実行することも可能です。 設定に関してはkey=value形式で突っ込めばOKです。 [crayon-5cbd …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …