読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

Sass/css ファイル作成自動化とクリック一発でコンパイル自動監視

Web Tips はてなブログ


www.imuza.com

Sass をインストールできましたので、開発環境(大層?)を整えます。



scss ファイルの変更を監視する --watch オプション

.scssファイルを.cssファイルにコンパイルするには、上の記事にも書いた通り、コマンドプロンプトを立ち上げて、該当ファイルのあるフォルダに移動し、>sass style.scss:style.cssと打つだけですが、GUI のクリック一発に慣れていますと、コマンドプロンプトにコマンドを打つのも面倒になってしまいます。

バッチファイルを使ってコンパイルを自動化する方法を考えてみました。


自動化するバッチファイル

まず、コマンドプロンプト内の操作を自動化するバッチファイルをつくります。と言ってもたった2行です。

メモ帳などのテキストエディタを立ち上げ、次のバッチファイルをつくります。もちろんコメント行はなくても構いません。

@echo off

rem これはコメント行です
rem scssファイルを置くフォルダに移動

cd c:\work\sass

rem sassのコンパイルコマンド

sass --watch style.scss:style.css

適当なファイル名に.bat拡張子をつけて、同じフォルダなどに保存します。フォルダはどこでもいいのですが、これから.scssファイルを書いていくわけですから同じフォルダが便利かと思います。


ショートカットでクリック一発

バッチファイルを起動したいフォルダ、これも同じフォルダでいいと思いますが、そこに移動して右クリック > 新規作成 > ショートカットをクリックします。

f:id:ausnichts:20161102133548p:plain

ウィザードが立ち上がりますので、テキストボックスにcmd /kに続き、バッチファイルをフルパスc:\work\sass\autocompile.batなどと入れます。次へをクリックするとショートカット名の入力を求められますので、好きな名前をつけ完了をクリックします。

コマンドプロンプトのアイコンのショートカットができますので、クリックしてみてください。

f:id:ausnichts:20161102131531p:plain

監視状態になります。画像は一度scssファイルを変更して保存したところです。確かにcssファイルが作成されています。

終了する場合は、Ctrl+Cと打ちます。