如何将外部文件的内容加载到gulp浏览器同步

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();
});