Question

我有以下目录结构

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

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

现在，如果我运行proj命令，我的浏览器窗口就会打开，显示以下网址gulp browser-sync。它完美地打开了我的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);
});

我已经搜索了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"]);
        });

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

2 个答案: