skillup

技術ブログ

JavaScript

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

投稿日:

前回の記事で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

JSF+ajax

JSFでajaxを使うときにいろいろと調べたのでメモ。 やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。 ajaxを使う …

no image

途中入力離脱防止処理 JavaScript

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

Vue.jsについて

次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・ Contents1 vue.jsとは?2 ソース3 参 …