最近開発にはめっきりBrowsersyncを利用している。 Browsersync - Time-saving synchronised browser testing
通常Webサービスを開発する場合、ユーザ画面と管理画面などと複数サービスを開発するケースが多いので、一つのだけ
$ browser-sync start --config bs-config.js
で立ち上げるのはしんどいものだ。また、他のタスクも走らせるケースが多いので単体でbrowser-syncコマンドで都度立ち上げることもほぼない。
gulpからBrowsersyncを立ち上げる
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var browserSyncAdmin = require('browser-sync').create(); var browserSyncDefaultSettings = { 'https': true, }; function getRewriteRules(matchRule, replaceString) { var obj = {}; obj.match = matchRule; obj.fn = function(match) { return replaceString; }; return [obj]; } gulp.task('browser-sync-example.jp', function(){ var exampleSettings = browserSyncDefaultSettings; exampleSettings.files = ['sites/example.jp/public/**/*', 'sites/example.jp/views/**/*.html']; exampleSettings.https = true; exampleSettings.port = 3000; exampleSettings.proxy = 'https://example.jp'; exampleSettings.ui = { 'port': 3001, 'weinre': { 'port': 8080 } }; exampleSettings.rewriteRules = getRewriteRules(/example\(サービス名\)/g, 'さーびすめい'); browserSync.init(exampleSettings); }); gulp.task('default', ['browser-sync-example.jp']);
FrameWork内のjs, css, scssファイルとHTMLtemplateファイルを監視対象として、httpsで立ち上げる場合には上記のような形で書いている。 オプション設定は下記を参照。
$ gulp
複数のサイトをBrowsersyncで立ち上げる
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var browserSyncAdmin = require('browser-sync').create(); var browserSyncDefaultSettings = { 'https': true, }; function getRewriteRules(matchRule, replaceString) { var obj = {}; obj.match = matchRule; obj.fn = function(match) { return replaceString; }; return [obj]; } gulp.task('browser-sync-example.jp', function(){ var exampleSettings = browserSyncDefaultSettings; exampleSettings.files = ['sites/example.jp/public/**/*', 'sites/example.jp/views/**/*.html']; exampleSettings.https = true; exampleSettings.port = 3000; exampleSettings.proxy = 'https://example.jp'; exampleSettings.ui = { 'port': 3001, 'weinre': { 'port': 8080 } }; exampleSettings.rewriteRules = getRewriteRules(/example\(サービス名\)/g, 'さーびすめい'); browserSync.init(exampleSettings); }); gulp.task('browser-sync-admin.example.jp', function(){ var adminExampleSettings = browserSyncDefaultSettings; adminExampleSettings.files = ['sites/admin.example.jp/public/**/*', 'sites/admin.example.jp/views/**/*.html']; adminExampleSettings.https = true; adminExampleSettings.port = 3002; adminExampleSettings.proxy = 'https://admin.example.jp'; adminExampleSettings.ghostMode = false; adminExampleSettings.ui = { 'port': 3003, 'weinre': { 'port': 8080 } }; adminExampleSettings.rewriteRules = getRewriteRules(/サービス名管理画面/g, 'さーびすめい管理画面'); browserSyncAdmin.init(adminExampleSettings); }); gulp.task('default', ['browser-sync-example.jp', 'browser-sync-admin.example.jp']);
この場合には gulp実行時に複数サイト同時に稼働するようになる。