タグ: Browsersync

そのやり方をブログにすると私が喜びます

— gatespace（五十嵐和恵） (@gatespace_k) March 9, 2017

おかんが喜ぶらしいので書きます。

Browsersync という node.js 製の開発ツールがあります。これを使うと、開発用のサーバーが（通常 localhost:3000）で立ち上がって、ファイルの変更時にブラウザを自動リロードしてくれたり、CSSとかを自動で差し替えてくれたり、 見ている全てのブラウザでスクロールの位置などを同期してくれたりととにかくいろいろ便利なツールです。Sass や Babel 等と組み合わせるととても便利だったりします。

VCCW や Wocker や PHP のビルトインサーバーで WordPress や PHP の開発を行ったりしますが、そのときにも Browsersync 出来たら便利ですよね。（というか別にWordPressやPHP以外でも便利です）

こんな感じで出来ます。何はともあれ、Browsersync をインストールします。

$ npm install -D browser-sync

そして、こんな感じで、server.js のようなファイルを、開発中のテーマの中に作ります。

var browserSync = require("browser-sync");
browserSync({
  proxy: 'vccw.dev',
  files: [
	"./dist/styles/**/*.css",
	"./dist/scripts/**/*.js",
	"./**/*.php",
  ]
});

proxy に設定するのは、ローカルサーバーの hostname です。WP-CLI でローカルWEBサーバーを立てて開発などをしているときは、localhost:8080 等にします。

files には、監視するファイルを入れます。指定したファイルに変更があったときにブラウザが自動でリロードしたり、CSSファイルの場合は、動的に差し替えてくれます。JS や CSS をビルドしたりする際は、出力されたものだけを指定しておくのがベターです。

そして、server.js を起動すると、Browsersync が起動して、いろいろ便利にやってくれます。

$ node server.js

package.json に

{
  "scripts": {
    "serve": "node ./server.js"
  }
}

等と書いておくと、

$ npm run serve

みたいな感じで使えるので、よりスマートかなーと思います。

glup と組み合わせる場合

gulp を使っている場合はこんな感じになります。

var browserSync = require("browser-sync");
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/styles/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist/styles'));
});

gulp.task('browserSync', function () {
  browserSync({
    proxy: 'vccw.dev',
    files: [
	    "./dist/styles/**/*.css",
	    "./dist/scripts/**/*.js",
	    "./**/*.php",
    ]
  });
});

gulp.task('watch', function(){
  gulp.watch('./src/styles/*.scss', ['sass']);
});

gulp.task('default', ['browserSync', 'sass', 'watch']);

gulp で sass の自動ビルドをやってる場合などは、こんな感じで使えば良いんじゃ無いかなと思います。