如何将外部文件的内容加载到 gulp browser-sync

Question

我正在加载浏览器同步代理，并希望从外部文件加载搜索和替换术语，以便在页面加载到浏览器时对其进行修改。

我想从单独的文件中加载搜索和替换术语的原因是因为我想使用 gulp-watch 并在搜索和替换术语更新时重新加载浏览器同步。

我的项目文件夹：

• regex/search.txt
• regex/replace.txt
• gulpfile.js

gulpfile.js 的内容：

var gulp = require('gulp'),
fs = require("fs"),
browserSync = require('browser-sync');

var proj_url = "http://www.example.com";
var search_text = "";
var replace_text = "";

gulp.task('readRegEx', function() {
    return gulp.src('regex/*.txt')
    .pipe(fs.readFile("regex/search.txt", "utf-8", function(err, data) {
        search_text = data;
    }))
    .pipe(fs.readFile("regex/replace.txt", "utf-8", function(err, data) {
        replace_text = data;
    }))
});

gulp.task('browser-sync', function() {
    browserSync({
        proxy: {
            target: proj_url
        },
        rewriteRules: [
            {
                match: search_text,
                fn: function (match) {
                    return replace_text;
                }
            }
        ]
    });
});

gulp.task('default', ['readRegEx','browser-sync'], function() {
    gulp.watch(['regex/*.txt'], [browserSync.reload]);
});

这不起作用。我收到以下错误：

TypeError: Cannot call method 'on' of undefined ...

Answer 1

为此，您需要使浏览器同步依赖于 readRegEx

gulp.task('browser-sync', ['readRegEx'], function() {

这保证了正确的执行顺序。

那么您可以通过这种方式使 readRegEx 同步（并且更简单）：

gulp.task('readRegEx', function() {
    search_text = fs.readFileSync("regex/search.txt", "utf-8").toString();
    replace_text = fs.readFileSync("regex/replace.txt", "utf-8").toString();
});