0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Sassの利用環境を整える 〜シェルスクリプトを生成してwatchさせ、自動でコンパイルさせる〜

Last updated at Posted at 2015-06-10

シェルスクリプトとは?

コマンドをパッケージ化して、ダブルクリックで実行させるようにする。これなら面倒なコマンドを打ってコンパイルする必要がなくなる。


早速作ってみよう!

★まずはファイルを生成!

ファイルの拡張子は command
シェルスクリプトを置きたいディレクトリに移動し、
ターミナルからファイルを生成。コマンドはこれ!

touch sass.command

※ファイル名は何でもよい

★処理を記述

sass.commandファイルに処理を記述しましょう。
処理は以下。

# !/bin/sh

cd $(dirname $0)
sass --watch sass:css

#!bin/sh
シェバンといって、シェルスクリプトであることを明示する記述。
まぁお約束みたいなもの。

cd $(dirname $0)
ここでシェルスクリプトのある場所へ移動するコマンドを実行。

sass --watch sass:css
これでwatch開始。
ここからはsassのコンパイル設定を記述するだけ。

★コメントアウト

シェルスクリプト内では先頭に#をつけると1行コメントになる。

■例

# !/bin/sh

cd $(dirname $0)
sass --watch sass:css
# sass --watch -t nested sass:css
# sass --watch -t expented sass:css
# sass --watch -t compact sass:css
# sass --watch -t compressed sass:css

実行権限

もうこれで動くのだけど、
このままだと実行権限が無いと言われて
起動できない。なのでターミナルで実行権限を与えるコマンドを
打つ必要が有る。

シェルスクリプトの有る場所へ移動し、次のコマンドを実行。

chmod +x sass.command

これで実行権限が付与され、シェルスクリプトが実行できる。

運用

このsass.commandというシェルスクリプトファイルを
サイトのルート階層に置いて使用すればOK!

sassフォルダとcssフォルダを探してやってくれまっせ!


その他シェルスクリプトを作るときに手こずったこと。

改行コードはLF

変なエラーが出て、watchが始まらないので注意
miなどのテキストエディタを使って、改行コードを確認しよう。

シェバンの入力ミス

頭のパスに「/」をつけ忘れてたww

# !/bin/shのところを#!bin/shとやってた。凡ミス

 bin/sh: bad interpreter: No such file or directory
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?