SassやPugを楽にコンパイルするならPreprosでOK

Web制作////

htmlで静的Webサイトを作るなら、全てテキストエディタのベタ打ちで作れないこともないのですが、効率悪くかなり時間がかかります。

だから、cssにはSass。htmlやejsやpugなんかがあったりするのですが、、、

どれもコンパイルが非常にめんどくさい！

ただコンパイルしたいだけなのに、GulpやGrunt使ったりなどなど大掛かりすぎる。

Gulp使わずにSassをコンパイルするときは、Koalaというアプリを使っていたんですが、いつの間にか開発が停止していたので、乗り換える必要が出てきました。

【sass/js】無料のGUIコンパイラーKoalaでコーディングを楽にしよう！

Gulpとか使わずに楽にコンパイルできて、koalaの代わりがないかずっと思ってたんですが、ようやく楽にできるツールを見つけました。Preprosといいます。PreprosはSassやPugのコンパイル、Javascriptのトランスパイルを簡単にやってくれるツールです。Preprosはkoalaよりもできることが増えています。

この記事はGUIで操作・起動できるPreprosについて紹介します。有料ですが、無料体験があってそれで動作チェックができます。

Preprosはマウスでクリックするだけでコンパイル設定が可能なアプリ

https://prepros.io/

Preprosはパソコンにインストールして使うアプリです。ターミナルを使わず普通の画面、GUIで操作してSassやPugなどをコンパイルできます。

Preprosをインストールしたら、立ち上げて、作業フォルダをドラッグアンドドロップ。

その後、SassやPugファイルをPrepros内で選ぶと詳細設定が可能。

これだけでコンパイルやトランスパイルができます。楽チン！

設定で、「Auto Compile」を選んでおけば、保存した時にコンパイルが実行されるようになるので後は、放置しておくだけでコンパイルができるようになります。

GulpやGruntでやろうとするとnodejsをインストールして、ターミナルで色々やってみたいなことがありますが、Preprosはそれが不要なので、簡単に誰でもセッティングができます。

ブラウザを自動で立ち上げることも可能

また、Preprosはhtmlのチェック用にローカルサーバーを立ち上げることもできます。

立ち上げたローカルサーバーはファイルが保存されると自動でブラウザも更新されるので、html制作時に重宝しそうですね。（phpの確認はまた別途php環境が必要なので、Preprosだけだとダメです。）

またローカルサーバーは同じWifiに繋いでいる端末からチェックすることができるので、ローカルのhtmlをスマホやiPadでチェックすることも可能。これも結構便利。

Preprosは他のプロジェクトのデフォルト設定も可能

Preprosは最初にプロジェクト追加時の設定をしておくことができます。

全てのプロジェクトで共通して使いたい、SassのコンパイルやアウトプットファイルのディレクトリなどをPreprosにプロジェクト追加した時の初期設定として設定が可能です。

僕の場合は、アウトプットファイルを開発フォルダとは全く別に置いています。

こんな感じで、どうコンパイルして、どこに出力するかみたいなことが可能。

Preprosのできること一覧

他にもPreprosはできることがたくさんあります。全部この記事に書こうとすると超長くなってしまうため、ここでリスト形式でまとめます

  • html確認用のローカルサーバー立ち上げ
  • ローカルサーバーはファイルが更新されると自動でブラウザリロード
  • ローカールサーバーをスマホでチェック
  • 画像ファイルの容量圧縮
  • プロジェクトのファイルをftp/sftpでアップロード
  • 各コンパイラ、トランスパイラーの詳細設定
  • プロジェクト初期ファイル用の環境設定
  • いろんなファイルのコンパイル・トランスパイル・ミニファイ
    • Sass
    • Less
    • Pug（Jade）
    • CSS
    • Javascript
    • Stylus
    • Markdown
    • Haml
    • Slim
    • Coffee Script
    • Livescript
    • Kit
    • Typescript
  • Windows, Max, Linuxでの全環境で対応可能

めちゃくちゃできることが多いですね。これだけできればhtml作るだけならなんでも対応できそうです。（個人的にejsはよく使うので対応して欲しかった。。）

ちなみにPreprosはMac、Windows、Linux全てにインストール可能です。パソコンが変わった時もアプリ入れるだけで環境構築が終わってしまうため、OSを変えても手間取りません。まじで楽です。

Preprosでサクッとhtmlを作ってしまおう

大量のhtmlの生産とかはGulpとかを使った方がいいと思いますが、数ページならPreprosでサクッとコンパイルできる環境を作って、ささっとhtmlを作るのがいいのかなーと思っています。

個人でちょろっと作るぐらいならGulpとかはオーバーテクノロジーな気がしています。。

今回紹介したPreprosは簡単です。僕もしばらくはこれを使っていこうかなと。

有料で29$ですが、時間短縮できるならそれぐらいすぐに元が取れるかなと。