gulp-assemble& gulp-watch在数据，包含或布局发生更改时不会重新编译站点 [英] gulp-assemble & gulp-watch not recompiling site when changes are made to data, includes or layouts

问题描述

我在使用 gulp-assemble 和 gulp-watch 时遇到了问题。我想要 gulp 来观察整个汇编源代码目录（ data ， includes ， layouts 和 pages ），并在文件发生更改时重新编译该网站。

我可以正确地为页面正常工作，但是 gulp 是在对数据，包含或布局进行更改时不重新编译网站 files。

我已将 watch 任务添加到 example gulpfile.js 在 gulp-assemble repository ：
$ b

  var gulp = require（'gulp'）; 
 var htmlmin = require（'gulp-htmlmin'）; 
 var extname = require（'gulp-extname'）; 
 var assemble = require（'assemble'）; 
 var middleware = require（'./ examples / middleware'）; 
 var gulpAssemble = require（'./'）; 
 
 //在汇编对象上设置项目
 assemble.data（{site：{title：'Blog'}}）; 
 assemble.data（['test / fixtures / data / *。{json，yml}']）; 
 assemble.layouts（['test / fixtures / layouts / *。hbs']）; 
 assemble.partials（['test / fixtures / includes / *。hbs']）; 
 
 //加载文件时运行的任意中间件
 assemble.onLoad（/index\.hbs/，middleware（assemble））; 
 $ b $ //在`test / fixtures`中渲染模板
 gulp.task（'default'，function（）{
 gulp.src（'test / fixtures / pages / * .hbs'）
 .pipe（gulpAssemble（assemble，{layout：'default'}））
 .pipe（htmlmin（{collapseWhitespace：true}））
 .pipe（extname（） ）
 .pipe（gulp.dest（'_ gh_pages /'））; 
}）; 
 
 // ======================================== ==================== 
 //我的手表任务
 // =============== ============================================= 
 gulp .task（'watch'，['default']，function（）{
 gulp.watch（'test / fixtures / ** / *。{hbs，yml，json}'，['default']） ; 
}）; 
  

如果我运行 gulp watch 并保存更改为页面目录中的任何 .hbs 文件，我会看到 gulp 触发终端输出中的默认，我在<$ c中看到 .html 文件



然而，如果我保存对任何 .hbs的更改， .json 或 .yml 数据中的文件，包含或布局目录，我看到 gulp code>在我的终端输出中触发默认，但是我发现没有改变 _gh_pages .html 文件。为了获得应用于 _gh_pages 文件的更改，我必须手动运行 gulp default 任务。

为了获得理想的行为，我需要改变什么？

解决方案

gulp-watch只会在默认任务的函数内部执行代码，因此为了重新加载数据和布局等内容，您需要将这些代码移动到函数内部（就在gulp.src之前）。

  var gulp = require（'gulp'）; 
 var htmlmin = require（'gulp-htmlmin'）; 
 var extname = require（'gulp-extname'）; 
 var assemble = require（'assemble'）; 
 var middleware = require（'./ examples / middleware'）; 
 var gulpAssemble = require（'./'）; 
 
 //加载文件时运行的任意中间件
 assemble.onLoad（/index\.hbs/，middleware（assemble））; 
 $ b $ //在`test / fixtures`中渲染模板
 gulp.task（'default'，function（）{
 //在汇编对象上设置项目
 assemble.data（{site：{title：'Blog'}}）; 
 assemble.data（['test / fixtures / data / *。{json，yml}']）; 
汇编。布局（['test / fixtures / layouts / *。hbs']）; 
 assemble.partials（['test / fixtures / includes / *。hbs']）; 
 
 gulp。 src（'test / fixtures / pages / *。hbs'）
 .pipe（gulpAssemble（assemble，{layout：'default'}））
 .pipe（htmlmin（{collapseWhitespace：true}）） 
 .pipe（extname（））
 .pipe（gulp.dest（'_ gh_pages /'））; 
}）; 
 
 // ======================================== ==================== 
 //我的手表任务
 // =============== ============================================= 
 gulp .task（'watch'，['default']，function（）{
 gulp.watch（'test / fixtures / ** / *。{hbs，yml，json}'，['default']） ; 
}）; 
  

I'm having issues using gulp-assemble with gulp-watch. I want gulp to watch the entire assemble source directory (data, includes, layouts and pages) and recompile the site when ever a file changes.

I'm able to get this working correctly for pages, but gulp is not recompiling the site when changes are made to the data, includes or layouts files.

I've added a watch task to the example gulpfile.js in the gulp-assemble repository:

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var middleware = require('./examples/middleware');
var gulpAssemble = require('./');

// setup items on the assemble object
assemble.data({site: {title: 'Blog'}});
assemble.data(['test/fixtures/data/*.{json,yml}']);
assemble.layouts(['test/fixtures/layouts/*.hbs']);
assemble.partials(['test/fixtures/includes/*.hbs']);

// arbitrary middleware that runs when files loaded
assemble.onLoad(/index\.hbs/, middleware(assemble));

// render templates in `test/fixtures`
gulp.task('default', function () {
  gulp.src('test/fixtures/pages/*.hbs')
    .pipe(gulpAssemble(assemble, { layout: 'default' }))
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(extname())
    .pipe(gulp.dest('_gh_pages/'));
});

// ============================================================
// my watch task
// ============================================================
gulp.task('watch', ['default'], function() {
  gulp.watch('test/fixtures/**/*.{hbs,yml,json}', ['default']);
});

If I run gulp watch and save a change to any of the .hbs files in the pages directory, I see gulp trigger the default in my terminal output, and I see the .html file in _gh_pages update with the change.

However, if I save a change to any of the .hbs, .json, or .yml files in the data, includes or layouts directories, I see gulp trigger the default in my terminal output, but I see no changes to the _gh_pages .html file(s). I have to run the gulp default task manually in order to get the changes applied to the _gh_pages files.

What do I need to change in order to get the desired behaviour?

解决方案

gulp-watch will only execute code inside the function for the default task, so to get things like data and layouts to reload, you'll need to move those pieces of code to inside the function (Just before gulp.src).

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var middleware = require('./examples/middleware');
var gulpAssemble = require('./');

// arbitrary middleware that runs when files loaded
assemble.onLoad(/index\.hbs/, middleware(assemble));

// render templates in `test/fixtures`
gulp.task('default', function () {
  // setup items on the assemble object
  assemble.data({site: {title: 'Blog'}});
  assemble.data(['test/fixtures/data/*.{json,yml}']);
  assemble.layouts(['test/fixtures/layouts/*.hbs']);
  assemble.partials(['test/fixtures/includes/*.hbs']);

  gulp.src('test/fixtures/pages/*.hbs')
    .pipe(gulpAssemble(assemble, { layout: 'default' }))
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(extname())
    .pipe(gulp.dest('_gh_pages/'));
});

// ============================================================
// my watch task
// ============================================================
gulp.task('watch', ['default'], function() {
  gulp.watch('test/fixtures/**/*.{hbs,yml,json}', ['default']);
});

这篇关于gulp-assemble& gulp-watch在数据，包含或布局发生更改时不会重新编译站点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！