gulpのbrowser-syncで自動リロード環境をつくる。

自動リロードしたくなったのでインストールしました。

npmインストール(※ gulpのオプションつき)

% npm install browser-sync gulp --save-dev

browserSyncをrequire()に追加

browserSync.initの proxyオプションは開くアプリケーションのサーバーのURL(今回は192.168.0.17)を指定しています。

 var gulp = require( 'gulp' ),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create();
    
gulp.task('sass',function(){
  gulp.src('sass/**/*.sass')
    .pipe(
      sass({
        sourceComments: 'map',
        outputStyle: 'nested'//'compressed'
      }))
    .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
  browserSync.init({proxy: 'http://192.168.0.17/index.html'});
  gulp.watch('sass/**/*.sass', ['sass',browserSync.reload]);
});

ここまでで最少の基本的な設定OKな感じ。

もう少し使い勝手をよくしたい。

ので、コマンドライン引数からSyncするファイルを指定できるようにしました。
コマンドの実行は以下のように-pathオプションを渡してファイルを指定する。

# gulp watch -path 'README.md'

受け取るプログラム側は、‘browserSyncProxy’ という変数を用意して。
-pathのパラメータがあれば後ろに追記する。
ということを冒頭部分に追加。

var gulp = require( 'gulp' ),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    browserSyncProxy = 'http://192.168.0.17/';

if(typeof process.argv[3] !== 'undefined' && process.argv[3] === '-path'){
  browserSyncProxy += encodeURI(process.argv[4]);
}

全体は以下の通り。

var gulp = require( 'gulp' ),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    browserSyncProxy = 'http://192.168.0.17/';

if(typeof process.argv[3] !== 'undefined' && process.argv[3] === '-path'){
  browserSyncProxy += encodeURI(process.argv[4]);
}

gulp.task('sass',function(){
  gulp.src('sass/**/*.sass')
    .pipe(
      sass({
        sourceComments: 'map',
        outputStyle: 'nested'//'compressed'
      }))
    .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
  browserSync.init({proxy: browserSyncProxy});
  gulp.watch('sass/**/*.sass', ['sass',browserSync.reload]);
});