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

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

複数の非同期処理終了後(when&Promise.all)

JavaScriptで複数の非同期処理(例:API)を走らせて、その非同期処理が全て終わった後で、何らかの処理をしたい時について。 Contents1 when2 Promise_all when j …

no image

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

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

no image

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

アーカイブ