cli
gulp
フロントエンド
pingy

もうgulpはいらない!フロントエンド初心者のためのpingy CLI

More than 1 year has passed since last update.


Pingy CLI

「フロントエンドの開発をしたい…でもgulpfileをガッツリ書けるほどの技術もないし…」

という方にはピッタリじゃないでしょうか。

Pingy CLI というフロントエンドビルドツールを発見しました。


Pingy CLI: The simple Frontend Build Tool

https://pin.gy/cli/

Gulp and Grunt and other heavyweight build tools are great for complicated build workflows. Sometimes you want something simpler that doesn't take lots of configuration to get up and running.

That's Pingy CLI.

(日本語訳)GulpとGruntなどのヘビーウェイトビルドツールは、複雑なビルドワークフローに最適です。時には、起動して実行するために多くの設定を必要としない単純なものが欲しい場合もあります。

それがPingy CLIです。


フロントエンドビルドツールといえば、言わずと知れた gulpgrunt などがありますが、

Pingy CLI はそれらに頼らないでフロントエンドの開発ができるツールです。


インストール

$ npm install -g @pingy/cli


使い方


1. initialize

$ pingy init

pingy init すると、Pingyが「どんな技術を使いますか?」と質問してきます。

SnapCrab_NoName_2017-5-11_11-57-47_No-00.jpg

SnapCrab_NoName_2017-5-11_11-57-58_No-00.jpg

SnapCrab_NoName_2017-5-11_11-58-6_No-00.jpg

質問に答えたら、ディレクトリに以下のファイルが作られます。

.

|-- index.html
|-- node_modules/
|-- package.json
|-- scripts
| `-- main.js
`-- styles
`-- main.scss

(注意 この場合は上記の質問にHTMLとSCSS、JSを指定しています)


2. develop

$ pingy dev

このコマンドを入力すると、ウェブサーバーが起動し、ブラウザで画面を確認しながら開発を行うことができます。

しかも、ファイルを編集し上書きするとブラウザが更新する livereload 機能もついています。

上記の質問にSCSSやCofeeScriptを設定すると、自動的にコンパイルもしてくれます。

何もgulpfileなどのタスクランナーは書いていないのにです!


3. export

$ pingy export

開発が終わったら、このコマンドを打つことによって、dist/ ディレクトリにコンパイルされ、且つ圧縮されたCSSやJSファイルが入ります。

export後のディレクトリ構成は以下のようになります。

.

|-- dist
| |-- index.html
| |-- index.src.html
| |-- package.json
| |-- scripts
| | |-- main.js
| | |-- main.js.map
| | `-- main.src.js
| `-- styles
| |-- main.css
| |-- main.css.map
| `-- main.scss
|-- index.html
|-- node_modules/
|-- package.json
|-- scripts
| `-- main.js
`-- styles
`-- main.scss


4. deploy

あとはデプロイ先のサーバーにgitなどでデプロイするだけです!


Pingyのメリットデメリット

メリット:


  • gulpfileなどのタスクランナーファイルを書かなくても良い

  • サポートしている技術が多い

  • 使い方が明確でわかりいやすい

デメリット:


  • 簡単なツールを目指しているため、gulpfileなどをガンガン書いている人には向かない

  • 自分で設定ファイルを書かないので、かゆいところに手が届かない

公式サイトにPingy CLIとgulp/gruntの違いが書いてあります。

SnapCrab_NoName_2017-5-11_12-20-30_No-00.jpg

個人的には Pingy CLI はとても使えるツールだと思います。