ほんとに無料?なくらい高機能なGUIコンパイラーPrepros【Win・Mac】

Category: App, Sass, Windows | Tags: , , ,
Preprosこれで無料はやばい。

タイトルとおりほんとに無料すか?っていうくらい高機能なGUIコンパイラーがPreprosがリリースされました。
CSS HappyLife大明神様よりとても詳しく丁寧に解説してくれるだろうとのフリをうけ筆を走らせている次第でございます。
追記:現在は無料版はなく有料版のみっぽいです (2015.04.05)

Preprocessing just got easier with Prepros

prepros
Prepros

現在バージョンは1.7。Windows版のみリリースされています。
追記:バージョン2.2でMac版も出ました (2013.07.11)
Codekitのような高機能GUIコンパイラーがWindowsにもいよいよ登場ですね。

すでに海外の記事では「WindowsのCodekitだぜ!」みたいなことが言われてるとかいないとか。

Preprosの主な機能

主な機能

Preprosの主な機能として

ブラウザのオートリフレッシュ。
ローカルサーバー内蔵。
エラー通知。
システムに依存しないコンパイラー。
バックグラウンドで監視。

そして、豊富な対応言語。対応言語とバージョン
対応している言語は、

  • Sass & Compass
  • Javascript
  • LESS
  • Stylus
  • Jade
  • CoffeeScript
  • Haml
  • Markdown
  • Slim

と、ほとんどのメタ言語カバーしてますね。Javascriptは圧縮してくれるみたいです。
v1.6でCompassのフルサポートに対応し、v1.5でSlimが追加されました。
更新頻度がすごい高いので今後も対応言語は増えそうです。

使用方法とか

インストール

インスコボタン

インストールはインストーラーからするだけなので割愛しますが、アプリ自体にRubyやGemなど一式パッケージされているのでRubyのインストールをしなくても使えます。Sass・Compassについては、システムの内部のRubyも使うことができます。

Chromeエクステンション

ライブリフレッシュができようになるChormeエクステンションがインスコボタンの隣で配布されてますので、これもついでにインストールしておきましょう。
気に入ったらDoneteもしちゃいましょう。

Prepros-Chromeエクステンション

プロジェクト登録

プロジェクト登録
右下の「+」ボタンか、フォルダを投げ込めばプロジェクト登録です。

プロジェクト登録した
こんな感じで対応した言語ファイルは表示されます。
ファイルを選択すると言語別のメニューが右に表示されます。見慣れた項目なので機能はわかるかなぁと。

アウトプット設定
ファイル名の下の「→」のところでアウトプットパスが設定できます。

プロジェクト設定

画面左下の歯車アイコンがプロジェクト設定です。
プロジェクト設定
「General」タブはプロジェクト名や「Live Refresh」のオン・オフができます。
「Use Custom server」にチェックをいれて「Server URL」にXMAMPPなどのlocalhostのアドレスを入れれば、サーバー機能で指定したアドレスを開いてくれます。

プロジェクト設定2
「Folders」タブはプロジェクトのCSSやjsのフォルダを指定します。

「More」フォルダはフィルターでした。プロジェクトで使用しないファイルを除外できます。

ローカルサーバー

ローカルサーバーボタンぽちっと
地球のマーク?を押すとローカルサーバーで開くことができます。

ブラウザで開く
index.htmlがあるとサイトが表示されますが、用意してません。さっせん。。
「Use Custom server」で任意のアドレスを指定していない場合このアドレスで表示されました。
3738ポートを使っているようです。

Chromeでエクステンションをインストールしており、「Live Refresh」をオンにしていれば保存するごとにブラウザが更新されます。ひゃっほい。

ショートカット

ショートカットは以下です。

  • CTRL+N : New Project(新規プロジェクト)
  • CTRL+R or F5 : Refresh Project Files(プロジェクトを更新)
  • CTRL+L : Open Live Project Url(ブラウザで開く)
  • CTRL+D : Remove Project(プロジェクトを削除)
  • CTRL+C : Compile Selected File(ファイルをコンパイル)
  • CTRL+SHIFT+C : Compile all project files(全てのファイルをコンパイル)

環境設定

Propres環境設定
環境設定は右上の歯車ボタンです。

Genaral

General
一般設定は、htmlの拡張子とか、エラー通知とコンパイル通知のオン・オフとか、除外パターンとか、キャッシュ削除とか。

Folders

Folders
フォルダの設定

Less

Less
Lessの設定はオートコンパイル、コメント、CSSの圧縮など。

Sass

Sass
Sassはオートコンパイル、ラインコメントかデバッグインフォ、Compass使うか、などのコマンドオプション。

Advanced
AdvancedのところでシステムのRubyを使うこともできます。

Stylus

130617-0012
オートコンパイル、コメント、CSSの圧縮、Nibを使うかなど。

CSSプリプロセッサは大体設定同じですね。てか他の言語も大体一緒なので割愛。

Javascript

JavaScript
さらのJavaScriptは圧縮してくれます。

ログ

Preprosログ
ログはノートのマークのアイコンで。

家のボタンはアプリのトップへ、その他のボタンは、Preprosのページに飛ぶページでした。

Full Compass Support?

Full Compass Support
「Use Compass」と「Full Compass Support」っていうのがあって、この違いは、「Use Compass」はチェックを入れるだけでCompassのミックスインや関数が使える程度で、「Full Compass Support」はConfig.rbを使って設定してスプライトとかガシガシやるか。の違いだと思います。多分。

通知センター

コンパイル成功

コンパイル失敗

コンパイルするか失敗か通知してくれます。これらは環境設定でオン・オフできます。

ということで

とても詳しく丁寧に説明しただろう!ぜはぁぜはぁ…

これで画像の圧縮機能が入れば、ほんとにCodekitですね。
ここまで高機能だと無料なのが信じられないですね。いつか有料になるんじゃないかと疑ってしまいます。
私がまだWindowsユーザーだったらDonateしてました(マジで)

追記:有料版のPrepros Proも登場しました。FTP機能やファイル共有機能などがあるようです。 (2012.10.20)

これでWindowsのGUIコンパイラーは、実質Preprosか日本語対応のKoalaの二択ですね。
Scout使ってる人は乗り換えオススメしちゃう!!

ダウンロードはこちら

prepros

Prepros :: Compile less, sass, scss, compass, stylus, cofffeescript, jade, haml, slim and markdown with live browser refresh.

参考(?)サイト

Windows対応のSassとかのフリーのコンパイラ