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

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命令，则会打开浏览器窗口，显示以下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
 ------------------------------------------------

我已经在SO上搜索了各种解决方案，但无济于事。 请帮助我被卡住。

更新

我正在使用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任务的路径。 如果您需要以下注释的帮助。

Answer 2

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

此gulp代码正在查看文件夹中的新图像，并减小图像大小并移至缩放的文件夹。

可能对您有帮助。

// 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"]);
        });