javascript - Gulp browser-sync 不监控和注入(inject)文件

Question

我有以下目录结构

workspace
  |--dev
      |--proj
          |--css 
              |--style.css
          |--js
              |--app.js
          |index.php
          |something.html
          |gulpfile.js
          |package.json

我已在 ...workspace\dev 上安装了名为 dev.local 的 vhost。如您所见，我在 proj 目录中创建了一个 gulpfile.js。

现在，如果我运行gulp browser-sync命令，我的浏览器窗口将打开，显示以下网址http://dev.local:3000/proj/。它完美地打开我的 index.php 页面，但如果我对文件进行任何修改，它们就不会受到监视，也不会注入(inject)到我的页面中。所以我的页面不会自动重新加载。

这是我的gulpfile.js

var gulp = require('gulp');
var bs = require('browser-sync').create(); // create a browser sync instance.

gulp.task('browser-sync', function() {
    bs.init({
        open: 'external',
        host: 'dev.local',
        proxy: 'dev.local/proj'
    });
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("*.html,*.php,css/*.css,js/*.js").on('change', bs.reload);
});

这是我的终端的输出

gulp browser-sync
[12:14:12] Using gulpfile ~/Documents/workspace/dev/proj/gulpfile.js
[12:14:12] Starting 'browser-sync'...
[12:14:12] Finished 'browser-sync' after 15 ms
[BS] Proxying: http://dev.local
[BS] Access URLs:
 ------------------------------------------------
       Local: http://localhost:3000/proj
    External: http://dev.local:3000/proj
 ------------------------------------------------
          UI: http://localhost:3001
 UI External: http://dev.local:3001
 ------------------------------------------------

我已经搜索过各种解决方案，但没有结果。请帮助我，我被困住了。

更新

我使用的是 BrowserSync 版本 2.18.8 和 gulp 版本 3.9.1

Answer 1

首先我建议将观看任务分成多个，这样更容易维护和更新。通过阅读您的评论，我可以建议扭转 gulp.tasks 链。您当前正在从监视任务加载“浏览器同步”，但您可以从浏览器同步任务加载“监视”任务。

var gulp = require('gulp');
var bs = require('browser-sync').create(); // create a browser sync instance.

gulp.task('serve', function() {
    bs.init({
        open: 'external',
        host: 'dev.local',
        proxy: 'dev.local/proj'
    });
});

gulp.task('watch', function () {
    gulp.watch("*.html").on('change', bs.reload);
    gulp.watch("*.php").on('change', bs.reload);
    gulp.watch("./css/*.css").on('change', bs.reload);
    gulp.watch("./js/*.js").on('change', bs.reload);

});

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

还可以通过浏览器同步来修改CSS文件，

    gulp.watch("css/*.css").on('change', bs.stream);

接下来我建议测试天气是否确实正在监视文件，并相应地更改 gulp.watch 任务的路径。如果您需要以下评论的帮助。