WEB制作(html・css(スタイルシート))に関する各種メモ書き

Sublime Text で sass(scss)の最速コンパイルを行う

いろいろ試した結果、次の node-sass を使う方法が最も速くおすすめです。

● node-sass をインストールする

node-sass グローバル環境にインストールします。(どこのディレクトリにいても使用できるようになります)

npm install -g node-sass

● gulp-sass をインストールする

gulp-sass をローカル環境にインストールします。

npm install gulp-sass --save-dev

gulpfile.js は 以下のようなファイルで作成します。

var gulp    = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./html/assets/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./html/assets/css'));
});

● SublimeTextにビルドを追加する(手動)

Package Controlからインストールできる SASS Build は Rubyのsass を使用するので動作が遅い。 そこで、手動で gulp-sass を使用するように手動でビルドを作成します。

1. ツール → ビルドシステム → ビルドシステム追加

2. 以下の内容で保存

ファイル名は SASS.sublime-build など好きなのをつけてください。
拡張子は .sublime-build から変更しないこと 。
path に 自分の環境の node-sass のパスを記述します。

{
	"cmd" : ["gulp sass"],
	"selector" : ["source.scss"],
	"shell" : true,
	"working_dir": "$project_path" ,
		"osx": {
		    "path": "$HOME/.nodebrew/current/bin/node-sass:$PATH"
		},
}

これでビルドシステムを「SASS」にしてビルド実行で sass → css 変換が行われます。 

● 保存して更新するたびに自動でビルドするように設定する

SublimeOnSaveBuild

をインストールします。 これで自動ビルドが実行されます。

No.1288
08/27 15:35

edit