Gulpでライブリロード(Vagrant環境)
背景
- html, css, js等を編集した後リロードボタンを押すのがとてもつらい
- ソース結合やらで既にgulpを導入していたのでそのまま流用したい
- ひとりでにブラウザがリロードされるのをドヤ顔で眺めていたい
環境
- Vagrant上のVMでApacheが動作中
- VM上のサーバに
http://192.168.10.10/
でアクセスできる
- ローカルの
/User/ats05/Vagrant/project
をVMとの共有ディレクトリとして使用中
材料
- npm
- gulp
- browser-sync
やったこと
- Vagrant上のVMでApacheが動作中
- VM上のサーバに
http://192.168.10.10/
でアクセスできる - ローカルの
/User/ats05/Vagrant/project
をVMとの共有ディレクトリとして使用中
材料
- npm
- gulp
- browser-sync
やったこと
npm、gulpは既に導入されている前提でいきます。
browser-syncのインストール
$ npm install --save-dev browser-sync
(色々出る)
+ [email protected]
added 277 packages in 22.626s
確認してみましょう
$ npm ls --depth=0
[email protected] /site/myProject
...
├──
├── [email protected]
├──
...
おk。
ちなみに--depth=0
をつけないと依存パッケージがわらわら出てきます。注意。
gulpfile.jsにタスクを作る
ここで実現するライブリロードは
gulpのwebサーバを起動 -> 変更を検知 -> ブラウザを再読み込み
という流れ。
- gulpのwebサーバを起動 :
bs-init
-
gulp.watch
で監視 - ブラウザを再読み込み :
bs-reload
こんな感じで作成します。
var gulp = require('gulp');
var bs = require('browser-sync').create();
//webサーバ起動
gulp.task('bs-init', function(){
bs.init({
proxy: "192.168.10.10" //ローカルサーバへのプロキシ設定
})
})
//リロード
gulp.task('bs-reload', function(){
bs.reload();
})
//監視タスク
gulp.task('w', ['bs-init'], function () {
gulp.watch('/User/ats05/Vagrant/project/*', ['bs-reload']);
});
gulp.task('w', ['bs-init'], function () {
この部分ですが、gulpのタスクを作成する際には第二引数で「そのタスクの前に実行するタスク」を登録できます。
この場合にgulp.watch
で監視を行うタスクを呼ぶと、監視を始める前にwebサーバの起動をしてくれるわけですね。
動かす
$ gulp w
以上。
browser-syncで起動したwebサーバがあればライブリロード自体は実現できるのですが、その場合はバックエンドを動かすことができないようです。
プロキシを通せばその辺りの検証もできます。
手元で動かしているものにはJSのconcatやhtmlの生成などを追加しています。
gulpはgruntに比べ設定ファイルが書きやすいですね。
...
gulp.watch('/User/ats05/Vagrant/project/src/js/*', ['js']);
gulp.watch('/User/ats05/Vagrant/project/src/css/*', ['sass']);
gulp.watch('/User/ats05/Vagrant/project/src/views/*', ['ejs']);
gulp.watch('/User/ats05/Vagrant/project/*', ['bs-reload']);
...
おしまい。
Author And Source
この問題について(Gulpでライブリロード(Vagrant環境)), 我々は、より多くの情報をここで見つけました https://qiita.com/ats05/items/d3d3770713f1b6f104ac著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .