Question

我将 gulp 与 gulp-pug 一起使用，以便将模板拆分为可重用的组件。 Pug抓取任何现有的* .pug（jade）文件，并将它们转换为浏览器同步和/或项目构建的通用html文件（在我的例子中）。

gulp.task('views', function buildHTML() {
return gulp.src('src/views/*.pug')
    .pipe(changed('src', {
        extension: '.html'
    }))
    .pipe(pug({
        pretty: true
    }))
    .pipe(gulp.dest('src/'))
});

gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
    gulp.watch('src/scss/**/*.scss', ['sass']);
    gulp.watch('src/views/**/*.pug', ['views']);
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('src/views/**/*.pug', browserSync.reload);
    gulp.watch('src/*.html', browserSync.reload);
    gulp.watch('src/js/**/*.js', browserSync.reload);
});

gulp.task('default', function (callback) {
    runSequence(['views', 'sass', 'browserSync', 'watch'],
       callback
    );
});

这是包含部分

的基本哈巴狗index

doctype html
html(lang='en')
  include partials/head.pug
  body
    <!-- content -->
    include partials/footer.pug
    include partials/scripts.pug

除了一件事之外，一切都在顺利进行，我的views文件夹结构如下：

views
--- partials
    --- *
    --- *
    --- etc.
--- index

当我对我的某个部分（partials文件夹中的pug文件）进行更改并保存时，实时重新加载功能按预期工作，但* .pug文件未被解析。但是，当我保存index.pug时，文件将被转换，页面将加载新内容。

我做错了什么，在哪里？

P.S。即使在编辑索引文件时，我也必须不时手动刷新页面，以便它可以呈现页面而不是空白的页面。

Answer 1

这里有一个很小但很大的错误。我也正在重载pug文件，这会导致解析器出现一些混淆。

我的观察任务看起来像这样：

underscore

现在，我删除了这一行：

gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
    gulp.watch('src/scss/**/*.scss', ['sass']);
    gulp.watch('src/views/**/*.pug', ['views']);
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('src/views/**/*.pug', browserSync.reload);
    gulp.watch('src/*.html', browserSync.reload);
    gulp.watch('src/js/**/*.js', browserSync.reload);
});

这没有意义，但我找到了。

您只需要注意 html 文件中的更改。

gulp和pug - 无法解析嵌套的部分

1 个答案: