Question

我正在尝试使用watchify转换复制brfs的行为，但我需要直接使用brfs，因为我想避免在脚本中添加额外的代码使用require与browserify / watchify一起使用。直接使用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在更改内容时再次捆绑脚本？

Answer 1

我认为这种方法使用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来观看文件，这与gulp用于gulp.watch的观察者相同。

Answer 2

您可以尝试gulp-shell，

然后gulp任务将是

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

Answer 3

不确定这是否适合您的情况...但您也可以使用此插件检测新文件并将其输出：

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

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

3 个答案: