読者です 読者をやめる 読者になる 読者になる

人生リアルタイムアタック

当面はPython学習帳

gulpで複数サイトを同時にBrowsersyncで立ち上げる

最近開発にはめっきり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で立ち上げる場合には上記のような形で書いている。 オプション設定は下記を参照。

Browsersync options

$ 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実行時に複数サイト同時に稼働するようになる。