WebStormをベースに、Gruntを用いてSassを利用していますが、どのようにしてSassまで行き着いているのか改めて仕組みをおさらいします。
GruntでSassを動かすために、プロジェクトフォルダごとに下記3点のファイルが必要になります。
- package.json
- Gruntfile.js
- config.rb
package.json
Gruntを動かすにはプロジェクトごとにプラグインファイルをインストールする必要があり、そのパッケージ情報がまとめられた設定ファイル。
WebStormでプロジェクトを開き、ターミナルから npm install
を実行するとこれが参照され、node_module
フォルダに一式インストールされる。
Gruntとは
Gruntとはnode.jsで動作するタスクランナー(作業自動化ツール)
Gruntfile.js
の設定をもとに動作する。
内容はおおまかに下記で構成されている。
- Gruntで行うタスクの設定
- タスクを処理するために必要なプラグインの設定
- デフォルト動作の設定
module.exports = function (grunt) { var pkg = grunt.file.readJSON('package.json'); //タスクの設定 grunt.initConfig({ compass: { dist: { options: { config: 'config.rb' } } }, watch: { files: ['themes/default/sass/*.scss'], tasks: ['compass'] } }); //プラグインの設定 grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); //デフォルト動作の設定 grunt.registerTask('default', ['watch']); };
Compassとは
Rubyで動作する、Sassを強化してくれるmixin郡のようなもの。
Compassの動作でSassをまかなえるので、GruntではCompassのみを動かす指定のみで済む。
config.rb
の設定をもとに動作する。
http_path = "/" //プロジェクトフォルダから見たルートパスの指定 css_dir = "css" //CSS出力するフォルダの指定 sass_dir = "sass" //読み込むscss用フォルダの指定 images_dir = "images" //画像フォルダの指定 javascripts_dir = "js" //JSフォルダの指定 output_style = :expanded //CSS出力時の圧縮指定。expanded, nexted, compact, compressed の4つから選ぶ relative_assets = true //パス出力の相対(true)絶対(falese)の指定 line_comments = false //CSSへのコメント出力。scss側の何行目と出てくるのでデバッグしやすくなる
WebStormでの実行
Gruntfile.jsを右クリックしOpen Grunt Console
からGruntコンソールが開きます。
左下にGruntfile.jsに書かれているタスクの一覧が出ますが、基本はdefaultをWクリックして開始します。
上記の内容であればSassを監視するための「watch」が動作し、scssファイルが編集されたらCSSが出力されるという仕組みが動きます。
Gruntfile.jsにタスクを加えればGruntコンソールに反映され、デフォルト以外のタスクもそこから単発で実行させることができます。