news

マークアップ用のnpm scriptsを作ってみました。

こんにちは、マークアップの業務を中心に行っている増田です。
マークアップやフロントエンドの実装に携わっている方はよく利用されているnode.jsのパッケージマネージャー「npm」ですが、パッケージの流行り廃りの周期が早い上に学習に時間がかかる部分もあり、なかなか手を付けられていない方もいるのではないでしょうか。
最近ではyarnと言うパッケージマネージャーの方がnpmよりも処理が早い!なんて記事もよく見かけるようになりました。。
流行は一旦、置いておき、、今回はnpmを使ってgulpやwebpackのようなツールを介さずにタスクやビルドを実行していく方法、使用するパッケージなどを簡単ではありますが紹介させていただきたいと思います。
node.jsのインストール方法やnpmの基本コマンドなどは割愛させていただきます。
ご了承お願いいたします。

 

 

説明よりもコードを見たほうが分かるという方もいらっしゃると思いますので最初に公開しているソースコードのリンクを貼らせていただきます。
https://github.com/hm-git/npm-scripts

 

 

ここからは詳細に書いていこうと思いますので興味がある方はこのまま読み進めてください。

 

npm scriptsとは

コマンドラインツールのnpmでスクリプトと聞くと自分は変な気持ちになりましたが、要約するとnpmがプロジェクトごとに生成するpackage.json”scripts”とういうフィールドにshell scriptとエイリアスコマンドを指定できる機能の事です。

 

具体的に
package.json

 

{
    name: dev,
    version: 1.0.0,
    scripts: {
      "start": "nodo app.js",
      "sass": "node-sass –w ./src/sass/**/*.scss –o ./public/css"
    },
}

 

キーは上記で設定したようにnpm startや npm run sassのようにエイリアスとして利用できる名前となり、値にはshell scriptをワンラインで記述する形式になります。
キーは自由に指定ができますが中には予約されている名前もあり、それらを含めて以下の4種類に分類されます。

 

 

start

appを起動させるようなshell scriptのエイリアスとして用いる

 

restart

appを再起動させるようなshell scriptのエイリアスとして用いる

 

stop

appを停止させるようなshell scriptのエイリアスとして用いる

 

test

appをテストさせるようなshell scriptのエイリアスとして用いる

 

 

今回作成したnpm scriptsでは最終的にすべてのshell scriptをstartの予約語にのせて連結させて実行します。

 

 

使用するパッケージ

 

browsersync

ローカルサーバーを立ち上げてファイル保存時にブラウザを自動リロードしてくれるツール。

プロキシの機能も付いています。

 

postcss

sassやless、stylusなどのaltCSSと呼ばれる分類に新しく加わったツール。

sassやlessがネスト構文や変数、extend、mixinなどの機能をワンパッケージにして提供しているのに対し、postcssはプラグインで機能を個別に追加していくように提供しており、高い拡張性と自由度を持っているようです。
今回はベンダープレフィックスを自動で付与してくれるプラグインと少しsassっぽく書けるようにプラグインを入れています。

 

babel

ECMAScript2015(ES6)、React.jsで使用するJSX、TypeScriptなどをブラウザで動くようにトランスパイルしてくれます。

今回はES6の学習にと思い導入しました。

 

pug(旧jade)

htmlのテンプレートエンジンとして人気のあるjadeのバージョンアップ版です。
タグで囲まない代わりに改行やインデントなどで全体を構成していきます。
include、変数、ループが使えたりなどプログラミングチックにhtmlを作れます。

 

npm-run-all

上記パッケージのshell scriptを連結して実行させるパッケージになります。

 

 

 

使用方法ですが、下記リンクへ記入させていただきましたのでご覧いただければと思います。
少しでも参考になれば幸いです。
https://github.com/hm-git/npm-scripts