現在フロントエンドの開発に必須となっているビルドツールですが、
いろいろとできることが増える一方、ちょっと開発してみたいデザイナーの方たちには敷居が高くなっているのかな？と思うことがあるので、ものすごくシンプルな「Pingy Cli」というビルドツールについてまとめました。
すごく簡単なので、これでデザイナーの人たちも黒い画面触ってもらえるといいな！
昔一度試してみたとき、WinだけのバグなのかSassをimportするときうまくいかなくて諦めたので
今回はMacでリベンジです！
Pingy Cliの公式ページはこちら
https://pin.gy/cli/
インストール前に
インストール前に、PCにnpmとNode.jsをインストールしてください。
こちらはぐぐるとわかりやすい記事がたくさん出てくるので今回は省略します。
一回入れればあとは何でもできるのでめんどくさがらずに入れてみてください！
インストール
とりあえず黒い画面（ターミナルetc）でこのコマンドを叩きます
npm install -g @pingy/cli
これでPingy Cliがインストールされました。
ここからはもうあとは設定するだけです！
設定
次に、
pingy init
このコマンドを打つと、次々に設定項目が質問されるので、カーソルで自分が使いたいものを選んでENTERを教えていくだけでOKです。
答えていく内容はこちら
ドキュメントのフォーマットを選びます
- HTML
- Pug
- ejs
から選べます
スタイルのフォーマットを選びます
- Sass（.scss）
- Sass（.sass）
- Less
- Stylus
から選べます。
スクリプトのフォーマットを選びます
- Javascript
- CoffeeScript
- Babel
- Buble
- TypeScript
- LiveScript
- DogaScript
から選べます。
設定したファイルの構成を確認します。
Yes， go ahead
を選択すると、これでファイルが生成されます！
インデントの形式
- スペース２つ
- スペース４つ
- タブ
から選べます。
インストールします
設定を選んだら、勝手にファイルを生成してくれます。
@pingy/cliとあわせて必要なパッケージもインストールしてくれるので楽です。
あんまりコマンドを叩かない人だと、npm installで使いたいパッケージをインストールする、
というのは少し怖い印象があるので、
最初はnpm installが必要にはなりますが、ここで必要なものをインストールしてくれるのはありがたいですね。
ということで、開発環境が整いました！
では、次は実際の開発フローについてです。
開発
pingy dev
まずはこれを叩いて開発環境を起動します！
とりあえずこれを叩くと勝手にブラウザで開発するページが開いて見れるようになります。
ライブリロード（ファイルを変更すると、ブラウザのリロードボタンを押さなくても勝手にブラウザ側で変更点が反映される）も自動で実装されているので、
開発もリアルタイムでブラウザ上に反映されるようになっています。
Pingy CLI works with Sass, Less, Stylus, Jade, Pug, Markdown, EJS, Bublé, LiveScript, Babel & Coffeescript with more coming soon.
公式での説明にあるように、
それぞれコンパイルも自動でされるようになっているため、コンパイルをするために何か準備する必要もありません。
簡単な開発は本当にこれだけあればすぐにできるようになります！
ちなみに、構文エラーがあった場合はブラウザ上でわかるようになっているので親切です。
例えば、scssファイルで}を余分に付けてしまった場合はこんな感じに
表示自体してくれなくなってしまいます。
コンパイルする
開発が終わったら、最後にファイルをコンパイルします。
pingy export
このコマンドを叩いて終わりです。
すごい。
コマンドを叩くと、開発していたディレクトリ配下に/dist/というディレクトリが生成されて、
その中にコンパイル後のファイルが入っています。
便利。
ちなみに、以前ハマったsassのimport問題は解決したのかMacだから大丈夫なのかは不明ですが問題なくコンパイルされるようになりました！
これで一通り開発準備→開発→開発完了までいくことができました。
さいごに
個人的には、最初の設定時にQ&A形式で答えていく方法がとてもわかり易いなと思いました。
開発環境の設定は、設定ファイルに記述するパターンが多いかと思いますが、それすらちょっとハードルが高いな…と思う場合も人によってはあるので、聞かれて答えていったら設定ファイルができていた！というのは分かりやすいです。
使用するコマンドもかなり少ないので
黒い画面が苦手な方もぜひこれぐらいの開発環境からチャレンジすると良いのかな？と思いました！