とりあえず一度sassに慣れると普通のCSSを書くのが苦痛です・・・
しかし、突然ローカル環境でWordPressが動作しなくなった(正確にはローカルサーバの名前解決をしなくなった)ことが原因で、なかなか書きにくくなっていました。
まあ理由はいろいろとあるのですが・・・いっそのこと、エディタをSublime Text2へ・・・とも思ったのですが、Coda2の方が使い慣れてることもあり、なかなか踏み切れず。
仕方ないのでサーバ側で対応することにしました。
ちなみにサーバは「Scientific Linux 6」です。恐らくCentOSでも同様かと思います。
node.jsをインストール
node.jsをインストールします。yumでインストール出来るかと思います。
[bash]
# yum install nodejs npm nodejs-cli
[/bash]
ruby / rubygems / sass /compassをインストール
これらがないと始まりません。
ruby/rubygemsをインストールします。
[bash]# yum install ruby rubygems[/bash]
gemがインストールされたらsass/compassをインストールします。
[bash]# gem install sass
# gem install compass[/bash]
grunt-cliをインストール
[bash]# npm install -g grunt-cli[/bash]
合わせて、必要なライブラリをインストールしておきます。
[bash]# npm install grunt-contrib-less
# npm install grunt-contrib-sass
# npm install grunt-contrib-compass
# npm install grunt-contrib-watch[/bash]
作業を行いたい(sass->css変換を行いたい)プロジェクトへ移動し、初期設定
私の場合、WordPressのサイトでsassを使いたいので、[wordpressのrootフォルダ]/wp-content/themes/テーマファイル名/ へ移動しました。
ここで、下記コマンドを入力します。
[bash]# npm init[/bash]
いろいろと聞かれますので、分かる範囲で答える程度で構いません。
設定ファイルを作ります
上記フォルダに “Gruntfile.js” という名前で設定ファイルを作ります。
内容は下記の通りです。
[bash]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’]
}
}
});
};[/bash]
ファイル名の指定は基本的には相対パスでOKのはずです。ダメなら絶対パスにして下さい。
“./library/scss/style.scss” はscssファイルです。
“./style.css”はscssファイルをコンパイルした後のcssファイル名です。
“./library/scss/*.scss” は、変更を監視するscssファイルを指定します。
監視を開始します
コマンドラインから次のように入力します。
[bash]# grunt[/bash]
その下の表示がされ、待機状態になればOKです。
[bash]Running "watch" task
Waiting…OK[/bash]
試しに何かエディタでscssファイルを編集してみましょう。もしくは編集したファイルをアップしてみます。
コンソールにこのような文字列が表示されればOKです。
[bash]# 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[/bash]
もしも常駐させたいときは
[bash]# grunt &[/bash]
で常駐します。
使ってみて・・・
とても便利じゃないか、と思っています。
後はこの機能を起動させるタイミングやログを閲覧する方法など、今のところ毎回sshログインしないと無理なので、その辺りをどうにか出来ればと思っています。
何にせよ、いつもよりちょっと便利な環境が出来た、ということで。
[tmkm-amazon]4883378578[/tmkm-amazon]
