gulpとBrowsersyncを使うと、scssファイルの変更を検知したら、コンパイルしてブラウザを自動リロードすることができる。

説明書

環境

$ node -v
v6.9.1
$ npm -v
3.10.8

インストール

$ npm install browser-sync --save-dev
browsersync@1.0.0 /home/vagrant/work/browsersync
└─┬ browser-sync@2.18.5

stylesタスク

gulpからlibsassを使うの記事に書いたのと同じタスクを使う。cssを書き出した後にbrowserSync.stream()を入れておく。

styles.babel.js
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
const $ = gulpLoadPlugins();
const src = 'frontend/app/styles';
const dist = 'public/assets/styles';
gulp.task('styles', () => {
return gulp.src(src + '/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
//.pipe($.autoprefixer({browsers: ['last 1 version']})) // vendor prefixを使いたい場合
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest(dist))
.pipe(browserSync.stream());
});
gulp.task('styles:minify', ['styles'], () => {
return gulp.src(dist + '/**/*.css', {base: dist})
.pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
.pipe($.rename((path) => {
path.basename += '.min';
}))
.pipe(gulp.dest(dist));
});

serveタスク

  • notify: trueにすると、画面右上に"Connected to BrowserSync"みたいなメッセージが表示される
  • proxy: Railsアプリを動かしている場合は、webrickなどのIPやポート番号を設定する
  • port: ブラウザーからアクセスする場合のポート番号。開発時にhttp://192.168.35.21:3000を開いていた場合はhttp://192.168.35.21:9000になる
  • ui: 設定用画面を有効にするかどうか。{port: 9001}にすると9001番ポートで設定用画面にアクセスできる。
serve.babel.js
import gulp from 'gulp';
import browserSync from 'browser-sync';
gulp.task('serve', ['serve:styles'], () => {
});
gulp.task('serve:styles', () => {
browserSync({
// show "Connected to BrowserSync" at right-top when reloaded
notify: true,
// proxy original http://192.168.35.21:3000
proxy: '192.168.35.21:3000',
// Let's access to http://192.168.35.21:9000
port: 9000,
ui: false
//ui: {port: 9001}
});
gulp.watch('frontend/app/styles/**/*.scss', ['styles']);
});

npm-scripts

説明書によると、package.jsonに"scripts"フィールドを設定しておくと、npm run gulpでnode_modules/.bin/gulpを実行できるようになる。

package.json
{
"scripts": {
"gulp": "gulp"
}
}

これで、npm run gulp serveとしておくと、勝手にコンパイル+自動リロードができるようになった。

他のツールを使う場合