シンプルなフロントエンドビルドツール「Pingy CLI」

シンプルなフロントエンドビルドツール「Pingy CLI」

気になって試してみたので備忘録兼ねてご紹介。
「Pingy CLI」はgulpやGruntに比べて面倒な設定や記述もなく簡単に扱えるシンプルなフロントエンドビルドツールで、少しコマンドを入力して幾つか項目を選択していくだけで使いたいフォーマットを用いた環境をすぐに用意してくれます。

※「Pingy CLI」を使うにはNode.jsが必要で、バージョンは6以降が必要となります。

インストール

まず下記コマンドを入力して「Pingy CLI」をインストールします。

$ npm i -g @pingy/cli

初期設定

初期設定時のイメージ

次に初期設定を行うために、使用したいカレントディレクトリを指定した状態で下記コマンドを入力します。
実行するとイメージのようにPingyというアスキーアートが表示され、続けて使用したい技術について質問が続きます。

$ pingy init

質問はまず使用するフォーマットについてドキュメント → スタイル → スクリプトの順に聞かれ、それぞれ矢印キーで選んで使いたいものをenterで選択していきます。
フォーマットはそれぞれ下記の中から選択することができ、よく利用されていると思うものはひと通り用意されています。

- ドキュメント
  • HTML
  • Jade
  • Pug
  • ejs
- スタイル
  • CSS
  • Sass (.scss)
  • Sass (.sass)
  • Less
  • Stylus
- スクリプト
  • JS
  • CoffeeScript
  • Babel
  • Bublé
  • TypeScript
  • LiveScript
  • DogeScript

各種フォーマットを選択したら次に出力時のフォルダ名(デフォルトでは「dist」)を聞かれます。
ただ、これについては自分のやり方が間違っているのか指定してもちゃんと認識してくれない感じでした...。

作成予定のファイル一覧が表示

ここまで入力した時点ではじめに指定したディレクトリには.pingy.jsonpackage.jsonという2つのファイルが作成されているのが確認でき、コマンドではイメージのように作成予定のファイル一覧が表示されつつファイルを作成するかどうかを聞いてきます。
ここで$ yを入力すると次にインデントをタブにするかスペースにするか聞かれるので任意のものを選択すれば、先ほど選択したフォーマットを用いたファイルがディレクトリに生成されるのを確認できます。
(ファイル作成の必要がなければ$ nを入力)

最後に自身が指定したフォーマットを使用するために必要なものをインストールするための確認が出てくるので、そこで再び$ yを入力して無事インストールされれば設定完了となります。

起動

開発環境の起動には下記コマンドを入力し、実行すると自動的にブラウザが起動され、設定完了後のファイルをそのまま使用している場合は「Hello world!」などが書かれたサンプルページが表示されます。

$ pingy dev

開発環境にはライブリロードが設定されているので、試しに生成されたファイルを更新してみると、わざわざ自身でブラウザ更新をしなくても自動的にリロードされて変更後の確認を容易にできると思います。
また、他にも選択したフォーマットによっては自動でコンパイル・トランスパイルを行なってくれたり、Source Mapsを出力してくれるようにもなっています。

ビルド

ビルドは下記コマンドで実行できます。
デフォルトでは/distディレクトリが作られ、そこにコンパイルされた各種ファイルが格納されるようになっており、HTMLなどは圧縮された状態で出力されます。

$ pingy export

設定変更

上で紹介してきたように「Pingy」は面倒な設定は不要で簡単に開発環境を用意してビルドまで行うこともできますが、言い方を変えればgulpやGruntのように自分で細かい設定をすることができません。
ただ、ビルド時については.pingy.jsonをいじることで多少変更することができ、例えばexportDirでビルド時のディレクトリ名指定やminifyでCSS・JSの圧縮有無の指定などできるようになっている他、デフォルトで/node_modulesを除外する設定が書かれているように、特定のディレクトリを除外したり特定のファイルをコンパイルさせないといった指定もできます。
この指定方法についてはGitHubで詳しく紹介されているので、必要な場合はそちらを確認してみてください。


個人的にはgulpやGruntの代わりにとまではいきませんでしたが、本当に簡易的でいいという人には少しのコマンド入力と項目選択でこの環境を用意できるのは便利だと思ったので、気になる人は是非試してみてください。

Close the search window,
please press close button or esc key.