デザイナーでも楽々フロントエンドの環境構築「PINGY CLI」

最近、「環境構築とかしたくないー」などと嘆くデザイナーさんがいらっしゃったので、何か手軽にフロントエンドの環境を構築できる方法はないかなーと思っていました。そこで良いツールを見つけました！！

その名もPingyです。

gulpやGruntなどは学習コストが掛かります。

Pingyの場合は、複雑なビルドのフローなどには向きませんが、設定ファイルなどもシンプルで初心者に優しく簡単に環境構築ができます！

では、早速環境構築をしていきましょう！

nodeが入っていることは前提としていますのでまだNodeをインストールしていない方は下記の記事を参考にしてください。(尚nodeのバージョンは6以上をサポートしています)

Macユーザーはこちら

qiita.com

Windowsユーザーはこちら qiita.com

1 インストール

npm i -g @pingy/cli

作業ディレクトリを作成

mkdir pingy_practice

作業ディレクトリへ移動

cd pingy_practice

2 初期設定

作業ディレクトリへ移動したのち、下記のコマンドを実行します。

pingy init

そうすると選択形式でいろいろと聞かれますので順に答えていきましょう！

HTMLの設定

先ずはhtmlのテンプレートエンジンはどうするのかを問われているので今回はPugを選択

CSSの設定

次にcssのメタ言語を問われているのでSass(.scss)を選択。

(ここでは詳しく説明しませんが、.scssと.sassは記述方法がことなるので注意してください)

JavaScriptの設定

ここではBabelを選択。Babelは新しいJavaScriptの記述が可能になり、ブラウザが解釈できるように旧来のJavaScriptにトランスパイルしてくれます。

すべての設定が終わったのであとはこれらのパッケージをインストールするのでYを選択しましょう。

その後、pingy devと入力してローカルサーバーを立てます。

そうするとこのようにタブが開き、このような画面になると思います。

これで開発できる状態になりました！！ 簡単ですね！！！

試しにscssファイルにbodyにblueとスタイルを変更してみてください。

ブラウザをリロードしていないにも関わらず、スタイルの変更がされました！

scssだけでなく、pugやjsもリアルタイムに変更されるので試してみてください。

ビルド

pingy.jsonがあるファイルと同じ階層の場所でpingy exportとコマンドを実行してください。

distフォルダができたと思います。ビルドも簡単ですね！

pingy.jsonファイルを少し覗いてみましょう。

画像にも書いてありますが

• exportDir：ビルドした時のディレクトリ名を設定
• minify：圧縮するかしないか
• compaile：コンパイルの有無(基本はtrue)
• exclusions：ビルドしないディレクトリ等
• port：ポート番号の設定

複雑なディレクトリ構成で開発をしないのであれば、Pingyが重宝すると思います。あまり開発環境構築を好まないデザイナーさんなどにも使いやすいのではないでしょうか？

その時々の状況に合わせて是非使ってみてください！！