命令在没有watchify的情况下使用brfs进行观看和捆绑

Command to watch and bundle using brfs without watchify

本文关键字：行观 brfs watchify 情况下 命令      更新时间：2023-09-26

我正试图用brfs转换复制watchify的行为，但我需要直接使用brfs，因为我想避免在使用带有browserify/watchify的require时添加到脚本中的额外代码。直接使用brfs只需将require(theFile)替换为其内容，而不使用其他内容。

使用此命令捆绑以下代码会产生我想要的结果：

brfs main.js > bundle.js

// main.js
var fs = require('fs');
var templates = {
    'header': fs.readFileSync('app/templates/header.html', 'utf8'),
    'nav-menu': fs.readFileSync('app/templates/nav-menu.html', 'utf8')
};

如何设置某些内容以监视更改，并在更改时让brfs再次绑定脚本？

我认为使用brfs编程api的这种方法是最合适的。与我们在js聊天中讨论的示例的唯一区别是，您需要使用fs.createReadStream将文件管道传输到brfs，而不是像我们所做的那样将文件名直接传递到brfs。

var gulp = require('gulp');
var brfs = require('brfs');
var fs   = require('fs');
// task without watch
gulp.task('bundle-templates', function() {
  fs.createReadStream('main.js')
    .pipe(brfs())
    .pipe(fs.createWriteStream('bundle.js'))
  ;
});
// this runs the `bundle-templates` task before starting the watch (initial bundle)
gulp.task('watch-templates', ['bundle-templates'], function() {
  // now watch the templates and the js file and rebundle on change
  gulp.watch([
    'templates/*.html',
    'main.js'
  ], ['bundle-templates']);
});

现在运行这个命令，你就做好了：

gulp watch-templates

这里不需要gulp。您可以使用任何任务运行程序或直接执行节点脚本来重新创建它。您可以直接使用gaze来监视文件，这与gullow用于gulp.watch的监视程序相同。

您可以尝试gullowshell、

那么吞咽任务将是

gulp.task('default', shell.task(['brfs main.js > bundle.js']);

不确定这是否适合您的情况。。。但你也可以使用这个插件来检测新文件并将其导出：

https://www.npmjs.com/package/gulp-newy/

使用更少文件的示例，并与一个级联的css文件进行比较：

function lessVersusOneFile(projectDir, srcFile, absSrcFile) {
    //newy gives projectDir arg wich is '/home/one/github/foo/` 
    var compareFileAgainst = "compiled/css/application.css";
    var destination = path.join(projectDir, compareFileAgainst);
    // distination returned will be /home/one/github/foo/compiled/css/application.css 
    return destination;
}
// all *.less files will be compared against 
// /home/one/github/foo/compiled/css/application.css 
gulp.task('compileLessToCss', function () {
    return gulp.src('app/css/**/*.less')
        .pipe(newy(lessVersusOneFile))
        .pipe(less())
        .pipe(gulp.dest('compiled/css'));
});
相关文章：