Javascript Gulp浏览器同步不监视和注入文件

我有以下目录结构

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

现在，如果我运行

gulpbrowser sync

命令，我的浏览器窗口将打开，显示以下url

http://dev.local:3000/proj/

。它完美地打开了我的

index.php

页面，但如果我对我的文件进行任何修改，它们都不会被监视，也不会被注入我的页面。因此，没有自动重新加载我的页面

这是我的

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版

你能这样试试吗？这是我在应用程序中实现的，用于查找新上传的图像，调整大小并移动到另一个文件夹

此“吞咽”代码正在查看文件夹中的新图像，并减小图像大小并移动到缩放文件夹

可能对你有帮助

// include gulp
var gulp = require('gulp');
// include plug-ins
var imagemin = require('gulp-imagemin');
var watch = require("gulp-watch");
var newer = require("gulp-newer");
var gulpgm = require("gulp-gm");

//var imgSource = './app/client/media/site/max/*';
//var imgDestination = './app/client/media/site/min';
var imgSource = [
    './app/client/media/**/*.png',
    './app/client/media/**/*.jpg',
    './app/client/media/**/*.jpeg',
    './app/client/media/**/*.gif',
    './app/client/media/**/**/*.png',
    './app/client/media/**/**/*.jpg',
    './app/client/media/**/**/*.jpeg',
    './app/client/media/**/**/*.gif',
    './app/client/media/**/**/**/*.png',
    './app/client/media/**/**/**/*.jpg',
    './app/client/media/**/**/**/*.jpeg',
    './app/client/media/**/**/**/*.gif',
];
var imgDestination = './app/client/scaled/';

gulp
        .task('imagemin', function () {
            console.log("image min called");
            return gulp.src(imgSource)
                    .pipe(watch(imgSource))
                    .pipe(newer(imgDestination))
                    .pipe(gulpgm(function (gmFile) {
                        return gmFile.minify();
                    }))
                    .pipe(gulp.dest(imgDestination));
        });
gulp
        .task("default", ["imagemin", "watch"]);

gulp
        .task("watch", function () {
            watch(imgSource, ["imagemin"]);
        });

---

首先，我建议将观看任务分为多个任务，这样更易于维护和更新。通过阅读您的评论，我可以建议您扭转吞咽任务的链条。您当前正在从手表任务加载“浏览器同步”，但您可以从浏览器同步任务加载“手表”任务

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任务的路径。

---

如果您需要下面这条评论的帮助。

我要做的第一件事是将

bs.reload

更改为

function（）{console.log（'changed'）}

，然后查看是gulp手表还是bs.reload有问题。另外，您使用的是哪一版本的browsersync，文档建议2之前和之后。-有不同的语法get 2.0文档建议您可以调用

bs.watch（）

，而不是

gulp.watch

，如果您愿意：值得一试？@dougajmcdonald

函数（）{console.log（'changed'）}

不会在控制台上返回任何输出，这表明您的全局路径wotnots不正确或事件处理程序未绑定。你能试试

gulp.watch（'，function（）{console.log（'changed'）；}）？感谢您的帮助。我已经阅读了文档并了解了如何使用流注入css。问题实际上是gulp没有持续监控文件。我理解。查看您的项目设置，我已经更新了我的答案，以使用css和js所需的路径。你能检查一下这个吗？另外，从您的示例中，我无法推断是否有其他.php文件需要监视，即gulp.task将只监视与gulpfile位于同一目录级别的.php扩展名为“any”的文件，即仅在“proj”中，而不是在上面的子目录中。不，它不监视任何文件。这个gulp只启动一次并立即完成任务，而不是持续监视文件。我知道目录结构是怎样的。因此，这不是问题所在。好吧，我明白了，我想这是因为你用['browser-sync']调用gulp watch。您可以将这些任务分解为“服务”和“观看”，并通过默认的“吞咽”任务加载这两个任务。我会修改我的答案，谢谢。现在它开始工作了。但据我所知，有一点疑问必须在这之前完成。所以我认为'gulp.task（'watch'，['serve'，]，function（）{`将是比指定选项更好的选项。现在我们可以调用
gulp watch
，它将首先调用
SERVICE
。相应地，我们可以更改最后一行。这个答案不清楚，并且没有解释什么、为什么、如何-1@DGRFDSGN当前位置如果您不明白，那么没关系，这并不意味着答案不清楚。问题不是关于ima的Geesall？你使用了链接的原理，但没有解释它。此外，Geesall面临的问题是他的任务突然完成（看起来是这样的）停止并找不到问题。您能解释一下您的答案对此有何帮助吗？@DGRFDSGN：我这样做了，但这不是提升或降低任何答案的方法。您只是要求某人在代码中添加更多解释，这可能会对其他人有所帮助。@DGRFDSGN：如果您对代码有任何特定问题，您可以询问我们或我有关我的代码，我应该具体地说是y。