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 命令，我的浏览器 window 将打开并显示以下 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 代码正在观看文件夹中的新图像并减小图像大小并移至缩放后的文件夹。

可能对你有帮助。

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

Answer 2

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

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 任务的路径。如果您需要以下评论方面的帮助。

Gulp 浏览器同步未监控和注入文件

Gulp browser-sync not monitoring and injecting files

javascript

apache

node.js

gulp

browser-sync