SassやPugを楽にコンパイルするならPreprosでOK
htmlで静的Webサイトを作るなら、全てテキストエディタのベタ打ちで作れないこともないのですが、効率悪くかなり時間がかかります。
だから、cssにはSass。htmlやejsやpugなんかがあったりするのですが、、、
どれもコンパイルが非常にめんどくさい！
ただコンパイルしたいだけなのに、GulpやGrunt使ったりなどなど大掛かりすぎる。
Gulp使わずにSassをコンパイルするときは、Koalaというアプリを使っていたんですが、いつの間にか開発が停止していたので、乗り換える必要が出てきました。
Gulpとか使わずに楽にコンパイルできて、koalaの代わりがないかずっと思ってたんですが、ようやく楽にできるツールを見つけました。Preprosといいます。PreprosはSassやPugのコンパイル、Javascriptのトランスパイルを簡単にやってくれるツールです。Preprosはkoalaよりもできることが増えています。
この記事はGUIで操作・起動できるPreprosについて紹介します。有料ですが、無料体験があってそれで動作チェックができます。
Preprosはマウスでクリックするだけでコンパイル設定が可能なアプリ
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$ですが、時間短縮できるならそれぐらいすぐに元が取れるかなと。
【読み放題】kindleアンリミテッドで実は技術書が読める
Amazonに、読み放題のkindleアンリミテッドがあるのですが、実は技術書もあります。
技術書は、3,000円とかが当たり前の値段だったりして結構高いのでkindleアンリミテッドで技術書を読むのも結構アリだなと思ってます。
kindleアンリミテッドは月額980円するのですが、全部無料で読むことができるため、本を買うよりお得。
月に1冊技術書を読むのなら、確実に得するので、本で勉強するのが好きな人は、kindleアンリミテッドに入るのがおすすめです。
初回は30日の無料体験ができて微妙ならすぐに解約できるので、一度登録してみるのはアリなんじゃないかと。