とりあえず一度sassに慣れると普通のCSSを書くのが苦痛です・・・
しかし、突然ローカル環境でWordPressが動作しなくなった(正確にはローカルサーバの名前解決をしなくなった)ことが原因で、なかなか書きにくくなっていました。
まあ理由はいろいろとあるのですが・・・いっそのこと、エディタをSublime Text2へ・・・とも思ったのですが、Coda2の方が使い慣れてることもあり、なかなか踏み切れず。
仕方ないのでサーバ側で対応することにしました。
ちなみにサーバは「Scientific Linux 6」です。恐らくCentOSでも同様かと思います。
node.jsをインストール
node.jsをインストールします。yumでインストール出来るかと思います。
# yum install nodejs npm nodejs-cli
ruby / rubygems / sass /compassをインストール
これらがないと始まりません。
ruby/rubygemsをインストールします。
# yum install ruby rubygems
gemがインストールされたらsass/compassをインストールします。
# gem install sass # gem install compass
grunt-cliをインストール
# npm install -g grunt-cli
合わせて、必要なライブラリをインストールしておきます。
# npm install grunt-contrib-less # npm install grunt-contrib-sass # npm install grunt-contrib-compass # npm install grunt-contrib-watch
作業を行いたい(sass->css変換を行いたい)プロジェクトへ移動し、初期設定
私の場合、WordPressのサイトでsassを使いたいので、[wordpressのrootフォルダ]/wp-content/themes/テーマファイル名/ へ移動しました。
ここで、下記コマンドを入力します。
# npm init
いろいろと聞かれますので、分かる範囲で答える程度で構いません。
設定ファイルを作ります
上記フォルダに “Gruntfile.js” という名前で設定ファイルを作ります。
内容は下記の通りです。
module.exports = function(grunt){
grunt.loadNpmTasks("grunt-contrib-sass");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask('default', ['watch']);
grunt.initConfig({
sass : {
dist : {
options : {
style: 'nested'
},
files : {
"./style.css" : "./library/scss/style.scss"
}
}
},
watch : {
sass : {
files : ["./library/scss/*.scss"],
tasks : ["sass:dist"]
}
}
});
};
ファイル名の指定は基本的には相対パスでOKのはずです。ダメなら絶対パスにして下さい。
“./library/scss/style.scss” はscssファイルです。
“./style.css”はscssファイルをコンパイルした後のcssファイル名です。
“./library/scss/*.scss” は、変更を監視するscssファイルを指定します。
監視を開始します
コマンドラインから次のように入力します。
# grunt
その下の表示がされ、待機状態になればOKです。
Running "watch" task Waiting...OK
試しに何かエディタでscssファイルを編集してみましょう。もしくは編集したファイルをアップしてみます。
コンソールにこのような文字列が表示されればOKです。
>> File "library/scss/style.scss" changed. Running "sass:dist" (sass) task Done, without errors. Completed in 1.021s at Fri Jun 21 2013 16:00:20 GMT+0900 (JST) - Waiting... OK
もしも常駐させたいときは
# grunt &
で常駐します。
使ってみて・・・
とても便利じゃないか、と思っています。
後はこの機能を起動させるタイミングやログを閲覧する方法など、今のところ毎回sshログインしないと無理なので、その辺りをどうにか出来ればと思っています。
何にせよ、いつもよりちょっと便利な環境が出来た、ということで。
レスポンシブWebデザイン 制作の実践的ワークフローとテクニック
著者／訳者：渡辺 竜
出版社：ソシム( 2012-12-20 )
定価：￥ 2,940
Amazon価格：￥ 2,940
単行本 ( 320 ページ )
ISBN-10 : 4883378578
ISBN-13 : 9784883378579
オリジナル記事はこちら Linuxサーバでsass/compassなどを自動コンパイル出来るようにする | OpenMediaLaboratory on 2013年6月24日.
The post Linuxサーバでsass/compassなどを自動コンパイル出来るようにする appeared first on OpenMediaLaboratory.