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]);
});
