いよいよ本題に近づいてきた。
これを試したくて頑張ってきた。多分。
まずは、BrowserSyncのインストール。
$ npm install –save-dev browser-sync
browser-sync@2.7.12 node_modulesbrowser-sync
├── async-each-series@0.1.1
├── query-string@2.3.0
├── longest@1.0.1
├── ucfirst@0.0.1
├── emitter-steward@0.0.1
├── opn@2.0.1
├── dev-ip@1.0.1
├── pad-left@1.0.2 (repeat-string@1.5.2)
├── ua-parser-js@0.7.7
├── portscanner@1.0.0 (async@0.1.15)
├── serve-static@1.10.0 (escape-html@1.0.2, parseurl@1.3.0, send@0.13.0)
├── foxy@11.0.3 (cookie@0.1.3, lodash.merge@3.3.1)
├── connect@3.4.0 (utils-merge@1.0.0, parseurl@1.3.0, debug@2.2.0, finalhandler@0.4.0)
├── browser-sync-client@2.2.1 (fresh@0.3.0, etag@1.7.0)
├── meow@3.3.0 (object-assign@3.0.0, camelcase-keys@1.0.0, minimist@1.1.1, indent-string@1.2.1)
├── immutable@3.7.4
├── resp-modifier@4.0.2 (minimatch@2.0.8)
├── anymatch@1.3.0 (arrify@1.0.0, micromatch@2.1.6)
├── chokidar@1.0.3 (arrify@1.0.0, is-glob@1.1.3, path-is-absolute@1.0.0, glob-parent@1.2.0, async-each@0.1.6, is-binary-path@1.0.1, readdirp@1.3.0)
├── serve-index@1.7.0 (escape-html@1.0.2, parseurl@1.3.0, batch@0.5.2, http-errors@1.3.1, debug@2.2.0, accepts@1.2.9, mime-types@2.1.1)
├── easy-extender@2.3.1 (lodash@2.4.2)
├── eazy-logger@2.1.2 (tfunk@3.0.1, opt-merger@1.1.0)
├── localtunnel@1.5.1 (debug@0.7.4, optimist@0.3.4, request@2.11.4)
├── socket.io@1.3.5 (debug@2.1.0, has-binary-data@0.1.3, socket.io-adapter@0.3.1, engine.io@1.5.1, socket.io-parser@2.2.4, socket.io-client@1.3.5)
├── lodash@3.9.3
└── browser-sync-ui@0.5.11 (angular-touch@1.4.1, connect-history-api-fallback@0.0.5, angular-sanitize@1.4.1, angular-route@1.4.1, angular@1.4.1, stream-throttle@0.1.3, weinre@2.0.0-pre-I0Z7U9OV)
そして、gulpfile.jsを編集。
var gulp = require(‘gulp’);
var browserSync = require(‘browser-sync’);
var httpProxy = require(‘http-proxy’);
gulp.task(‘browser-sync’, function() {
var proxy = httpProxy.createProxyServer({});
browserSync({
notify : false,
logPrefix : ‘WSK’,
server : {
baseDir : “./”,
middleware : function(req, res, next) {
var url = req.url;
proxy.web(req, res, {
target : ‘http://localhost:80’
});
}
},
startPath : “/yii2-app-advanced/frontend/web/index.php”,
});
});
gulp.task(‘bs-reload’, function() {
browserSync.reload();
});
gulp.task(‘default’, [ ‘browser-sync’ ], function() {
gulp.watch(“frontend/**/*.html”, [ ‘bs-reload’ ]);
gulp.watch(“frontend/**/*.php”, [ ‘bs-reload’ ]);
});
はい。いきなりなので訳分かりませんね。
コメントを付けておきましょう。30分後の自分のために。
var gulp = require(‘gulp’); // gulp本体のインスタンスを生成
var browserSync = require(‘browser-sync’); // プラグインである「browser-sync」のインスタンスを生成
var httpProxy = require(‘http-proxy’); // 同じくプラグインである「http-proxy」のインスタンスを生成
// 1つ目のタスク「browser-sync」を定義する
gulp.task(‘browser-sync’, function() { // 「browser-sync」を実行する指示があれば、function()を実行する。
var proxy = httpProxy.createProxyServer({}); // Proxyサーバを生成
browserSync({ // browser-syncの本体
notify : false, // 画面右上にちらっと「Connected to BrowserSync」と表示したくない
logPrefix : ‘WSK’, // ログの前に、[WSK]と表示させる。
server : { // サーバーの設定
baseDir : “./”, // 基本URL
middleware : function(req, res, next) { // ミドルウェアの定義
proxy.web(req, res, {
target : ‘http://localhost:80’
});
//next(); // 次のミドルウェアを呼ぶ
}
},
startPath : “/yii2-app-advanced/frontend/web/index.php”, // 最初に開くページ
});
});
// 2つ目のタスク「bs-reload」を定義する
gulp.task(‘bs-reload’, function() {
browserSync.reload(); // リロード
});
// 3つ目のタスク「default」を定義する
// コマンドラインで、引数なしのgulpを実行すると、このタスクが実行される。
gulp.task(‘default’, [ ‘browser-sync’ ], function() { // タスク「browser-sync」を実行した後にfuncion()を実行する。
gulp.watch(“frontend/**/*.html”, [ ‘bs-reload’ ]); // frontendフォルダ以下の全てのhtmlファイルを監視し、変更されたらタスク「bs-reload」を実行する。
gulp.watch(“frontend/**/*.php”, [ ‘bs-reload’ ]); // frontendフォルダ以下の全てのphpファイルを監視し、変更されたらタスク「bs-reload」を実行する。
});