如何将外部文件的内容加载到gulp浏览器同步中 [英] How to load contents of an external file into gulp browser-sync

问题描述

我加载浏览器同步代理，希望加载搜索并从外部文件中替换条款，以便在页面加载到浏览器时修改该页面。

我想从一个单独的文件加载搜索和替换条款的原因是因为我希望使用gulp-watch并重新加载浏览器同步，因为搜索和替换条款已更新。

我的项目文件夹：

• 正则表达式/ search.txt< - 搜索字词存储在此文件中


• regex / replace.txt< - 替换字词存储在此文件中


• gulpfile.js

gulpfile.js的内容：
$ b

  var gulp = require（'gulp'），
 fs = require（fs），
 browserSync = require（'browser-sync'）; 
 
 var proj_url =http://www.example.com; 
 var search_text =; 
 var replace_text =; 
 $ b gulp.task（'readRegEx'，function（）{
 return gulp.src（'regex / *。txt'）
 .pipe（fs.readFile（regex /search.txt，utf-8，函数（err，data）{
 search_text = data; 
}））
 .pipe（fs.readFile（regex / replace。 txt，utf-8，函数（err，data）{
 replace_text = data; 
}））
}）; 
 $ b $ gulp.task（'browser-sync'，function（）{
 browserSync（{
 proxy：{
 target：proj_url 
}，
 rewriteRules：[
 {
 match：search_text，
 fn：function（match）{
 return replace_text; 
} 
} 
] 
}）; 
}）; 
 $ b gulp.task（'default'，['readRegEx'，'browser-sync']，function（）{
 gulp.watch（['regex / *。txt']， [browserSync.reload]）; 
}）; 
  

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

  TypeError：无法调用未定义的方法'on'... 
  
 
 
 
 $ b $ 
  gulp.task（'browser-sync'，['readRegEx']，function（）{
  
这保证正确的执行顺序。
然后你可以使readRegEx同步（和更简单）：
 
 
  gulp.task（'readRegEx'，function（）{
 search_text = fs.readFileSync（ （）; $ b $ replace_text = fs.readFileSync（regex / replace.txt，utf-8）。toString（）; 
}）; 
  
 
I am loading browser-sync proxy and want to load search and replace terms from an external file in order to amend the page as it is loaded into a browser.

The reason I want to load the search and replace terms from a separate file is because I want to make use of gulp-watch and reload browser-sync as the search and replace terms are updated.

My Project folder:


regex/search.txt  <- search term is stored in this file
regex/replace.txt  <- replace term is stored in this file
gulpfile.js


Contents of 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]);
});
This doesn't work. I get the following error:
TypeError: Cannot call method 'on' of undefined ...

解决方案
For that to work you need to make browser-sync dependant in readRegEx
gulp.task('browser-sync', ['readRegEx'], function() {
this guarantees the proper execution order.

then you can make readRegEx sync (and simpler) this way:
gulp.task('readRegEx', function() {
    search_text = fs.readFileSync("regex/search.txt", "utf-8").toString();
    replace_text = fs.readFileSync("regex/replace.txt", "utf-8").toString();
});


                        
这篇关于如何将外部文件的内容加载到gulp浏览器同步中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！