IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2016/11/2 SASS, WebTips, Windows, はてなブログ

www.imuza.com

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

  • scss ファイルの変更を監視する –watch オプション
  • 自動化するバッチファイル
  • ショートカットでクリック一発

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ファイルを書いていくわけですから同じフォルダが便利かと思います。

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

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

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

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

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

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

Sassインストール/gemアップデートでエラー、AddTrustExternalCARoot-2048.pem.がNot Found(解決)
CSS3 の display: flex がスゴイ! はてなブログのカスタマイズに活用!
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com