gulp 和 pug - 无法解析嵌套的部分
gulp and pug - unable to parse nested partials
我正在使用 gulp with gulp-pug,这样我就可以将我的模板拆分为可重用的组件。 Pug 抓取任何现有的 *.pug(jade) 文件并将它们转换为通用 html 浏览器同步文件 and/or 项目构建(在我的例子中)。
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
当我对其中一个部分(部分文件夹中的哈巴狗文件)进行更改并保存时,实时重新加载功能按预期工作,但未解析 *.pug 文件。但是,当我保存 index.pug
时,文件会被转换并且页面会加载新内容。
我哪里做错了什么?
P.S。即使在编辑索引文件时,我也不得不不时地手动刷新页面,这样它才能呈现页面而不是空白。
这里有一个很小但很大的错误。我还实时重新加载了 pug 文件,这对解析器造成了一些混乱。
我的观看任务是这样的:
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.watch('src/views/**/*.pug', browserSync.reload);
这毫无意义,但我找到了。
You only need to watch for changes in the html files.
我正在使用 gulp with gulp-pug,这样我就可以将我的模板拆分为可重用的组件。 Pug 抓取任何现有的 *.pug(jade) 文件并将它们转换为通用 html 浏览器同步文件 and/or 项目构建(在我的例子中)。
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
当我对其中一个部分(部分文件夹中的哈巴狗文件)进行更改并保存时,实时重新加载功能按预期工作,但未解析 *.pug 文件。但是,当我保存 index.pug
时,文件会被转换并且页面会加载新内容。
我哪里做错了什么?
P.S。即使在编辑索引文件时,我也不得不不时地手动刷新页面,这样它才能呈现页面而不是空白。
这里有一个很小但很大的错误。我还实时重新加载了 pug 文件,这对解析器造成了一些混乱。
我的观看任务是这样的:
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.watch('src/views/**/*.pug', browserSync.reload);
这毫无意义,但我找到了。
You only need to watch for changes in the html files.