大口，大口大口

Question

需要帮助。我使用gulp conect和它的肝脏加载方法。但是如果我及时构建一些模板，就会得到大量的页面刷新。有什么解决方案，我想建立几个模板与单页刷新？

Answer 1

因此，我重现了您的问题，并遇到了这个有效的解决方案。

首先，让我们检查一下你需要的gulp插件：

• gulp-jade
• gulp-livereload
• optional: gulp-load-plugins

如果您需要其中的一些内容，请访问：

http://gulpjs.com/plugins/

搜索并安装它们。

策略:我创建了一个名为live的gulp任务，它将检查您的*.jade文件，当您正在处理某个文件并保存它时，gulp会将其编译成html并刷新浏览器。

为了实现这一点，我们定义了一个名为compileAndRefresh的函数，该函数将接受监视器返回的文件。它会将该文件编译成html，并重新对浏览器进行网格化(使用适用于chrome livereload插件进行测试)。

备注：

我总是使用gulp load - plugins.livereload.

• This来加载插件，所以我使用的是，而
• 只会编译保存的文件，而当你让任务在命令行上实时执行时，plugins.jad只会编译这些文件。将不会编译其他未使用的文件。为此，您需要定义一个任务来编译所有文件，而不仅仅是那些以/jade和html格式输出到/html

的changed.

• Assume .jade文件

所以，下面是gulpfile.js：

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('webserver', function() {
  gulp.src('./html')
    .pipe(plugins.webserver({
      livereload: true
    }));
  gulp.watch('./jade/*.jade', function(event) {
    compileAndRefresh(event.path);
  });
});

function compileAndRefresh(file) {
  gulp.src(file)
    .pipe(plugins.jade({
    }))
    .pipe(gulp.dest('./html'))
}

编辑后备注：

• 删除了来自liveReload的compileAndRefresh调用(webserver将会这样做)。
• 使用gulp-server插件安装了gulp- connect，正如他们在存储库中建议的那样：“使用gulp.src() API基于connect 3的新插件。用简单的javascript编写。

Answer 2

您可以做的事情是只查看更改的文件，然后将函数仅应用于已更改的文件，如下所示：

gulp.task('live', function() {
  gulp.watch('templates/folder', function(event) {
    refresh_templates(event.path);
  });
});

function refresh_templates(file) {
  return 
    gulp.src(file)
      .pipe(plugins.embedlr())
      .pipe(plugins.livereload());
}

PS:这不是一个工作的例子，我不知道你是否在使用embedlr，但重点是，你可以观察，并使用一个回调来调用另一个函数来处理正在改变的文件，并且只操作那些文件。另外，我假设你的目标是刷新浏览器的模板，但你可以随心所欲地操作，将它们保存在dest上，或者做任何你想做的事情。

这里的重点是展示如何操作更改的文件: watch的回调+自定义函数。

Answer 3

var jadeTask = function(path) {
path = path || loc.jade + '/*.jade';

if (/source/.test(path)) {
    path = loc.jade + '/**/*.jade';
}

return gulp.src(path)
        .pipe(changed(loc.markup, {extension: '.html'}))
        .pipe(jade({
            locals  : json_array,
            pretty  : true
        }))
        .pipe(gulp.dest(loc.markup))
        .pipe(connect.reload());

}