排除 BrowserSync 不起作用的文件

Question

我目前正在学习 John Papa 关于 JavaScript 使用 GulpJS 构建自动化的课程。目前我尝试设置 browser-sync with gulp-nodemon 以使我的浏览器保持同步。这是我的 gulp 服务于我的开发构建的任务：

gulp.task('serve-dev', ['inject'], function () {
    var isDev = true;

    var nodeOptions = {
        script: config.settings.node.server,
        delayTime: 1,
        env: {
            'PORT': port,
            'NODE_ENV': isDev ? 'dev' : 'build'
        },
        watch: [config.server]
    };

    return $.nodemon(nodeOptions)
        .on('restart', ['vet'], function (event) {
            util.log('[nodemon] restarted');
        })
        .on('start', function () {
            util.log('[nodemon] started');
            startBrowserSync();
        })
        .on('crash', function () {
            util.log('[nodemon] crashed', 'red');
        })
        .on('exit', function () {
            util.log('[nodemon] exited cleanly');
        });
});

有趣的部分是函数 startBrowserSync():

function startBrowserSync() {
    if (browserSync.active) {
        return;
    }

    util.log('[browser-sync] Starting on port ' + port);

    gulp
        .watch([config.sass], ['styles'])
        .on('change', function (event) {
            util.onChange(event);
        });

    var options = {
        proxy: 'localhost:' + port,
        port: 3000,
        files: [
            config.client + '**/*.*',
            '!' + config.sass,
            config.tmp + '**/*.css'
        ],
        ghostMode: {
            clicks: true,
            location: false,
            forms: true,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'bsp',
        notify: true,
        reloadDelay: 1000
    };

    browserSync(options);
}

正如您在 files 选项中看到的那样，我想查看客户端文件夹中除 *.scss 文件之外的所有文件，并在我的 [=18] 中明确查看 CSS 文件=] 目录。约翰爸爸在他的课程中就是这样做的。但是，每次我更改 *.scss 文件中的某些内容时，整个页面都会重新加载。这不是预期的行为，因为我将 injectChanges 设置为 true，这意味着注入 CSS 而不是重新加载整个页面。问题是 ! 不会将文件排除在监视之外。这里有什么问题？

顺便说一句；我的 sass 配置如下所示：

var client = './src/client/';

var config = {
    [...]
    sass: client + 'styles/**/*.scss',
    [...]
}

我已经查看了 BrowserSync here and here 的文档，但即使我使用 watchOptions 属性并忽略文件它也不起作用。

另一个问题是 config.tmp + '**/*.css' 无法正常工作。我将变量声明为 var tmp = './.tmp/';。 BrowserSync 以某种方式对 .tmp 有问题。如果我将其更改为 tmp 只有它有效。但是，.tmp 适用于所有其他 gulp 任务，例如styles 任务：

gulp.task('styles', ['clean-styles'], function () {
    util.log('Compiling SCSS to CSS');

    if (production) {
        config.settings.sass.outputStyle = 'compressed';
    }

    return gulp
        .src(config.sass)
        .pipe($.plumber({
            errorHandler: util.onError
        }))
        .pipe($.sass(config.settings.sass))
        .pipe($.autoprefixer({
            browsers: [
                'last 2 versions',
                '> 5%'
            ]
        }))
        .pipe(gulp.dest(config.tmp));
});

这里有什么问题？有什么想法吗？

编辑：因为我使用的是 BrowserSync 2.7.1，所以我还尝试了通过在模块导出上调用 create() 来创建 browserSync 实例的推荐方法。此外，我像这样更改了 BrowserSync 调用，如 this 博客 post:

中所述

 browserSync.init([
            config.client + '**/*.*',
            '!' + config.sass,
            config.tmp + '**/*.css'
        ], options);

我从选项对象中删除了 files 属性并将它们作为数组传递给 init() 函数。 scss 文件仍未被忽略，因此即使样式仅发生变化，整个页面也会重新加载。

Answer 1

我找到了解决问题的方法。由于我的路径声明，它实际上正在崩溃。这是我之前的：

var client = './src/client/';
var clientApp = client + 'app/';
var server = './src/server/';
var bower = './bower_components/';
var tmp = './.tmp/';

如您所见，每个路径都以 ./ 开头，它仅适用于非 Windows 机器，因为 Windows 使用 .\ 作为当前工作目录的命令.也许是 BrowserSync 没有正确转换它，但对我来说，如果我按如下方式更改它，它就可以完美地工作：

var client = 'src/client/';
var clientApp = client + 'app/';
var server = 'src/server/';
var bower = 'bower_components/';
var tmp = '.tmp/';

我从路径中删除了所有 ./，并将我启动 BrowserSync 的方式更改为推荐的方式，正如我的问题编辑中已经提到的那样，并进行了较小的重构：

var files = isDev ? [
    config.client + '**/*.*',
    '!' + config.sass,
    config.tmp + '**/*.css'
] : [];

browserSync.init(files, options);

我偶然发现的一些网站给了我测试的线索：

Tips for Writing Portable Node.js Code
Dot-slash not recognized in command prompt - Trying to install Python module

如果有人对我的问题有更好的解决方案，欢迎补充我的post。

Answer 2

如果其他人遇到与我相同的问题，我可以排除文件的唯一方法是在文件路径中删除 ./。因此，举个例子，我必须将 ./config/*.less 更改为 config/*.less，然后它才会起作用。

Answer 3

来自 browserSync 文档：

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

所以在 John Papa 课程中，我通过将我的样式任务更改为以下内容来让它工作：

    gulp.task('styles', ['clean-styles'], function() {
        log('Compiling Less --> CSS');

        return gulp
            .src(config.less)
            .pipe($.less())
            .on('error', errorLogger)
            .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
            .pipe(gulp.dest(config.temp))
            .pipe(browserSync.stream());
    });

排除 BrowserSync 不起作用的文件

Excluding files for BrowserSync not working

node.js

npm

gulp

browser-sync