[英]gulp-file-include and jade nesting problems
我正在自学Gulp,并且正在使用gulp-file-include和Jade遇到问题,这依赖于正确的标记缩进。
gulp-file-include
成功地包含了部分(用于页脚和导航之类的东西),但是当包含这些部分时,玉的压痕就被弄乱了。 显然,错误缩进的Jade文件将产生错误嵌套的HTML。
app / index.jade
body
ul.navbar
h1.logo
| Logo
.container
| Lorem Ipsum...
.footer
@@include('./_footer.jade')
app / _footer.jade
.footer-content
| hello
a(href) my link
app / gulpfile.js
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
return gulp.src('./index.jade')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist/'));
});
输出
body
ul.navbar
h1.logo
| Logo
.container
| Lorem Ipsum...
.footer
.footer-content
| hello
a(href) my link
所述@@include('./_footer.jade')
清楚地嵌套在 .footer
中的代码,但内容_footer.jade
被外面呈现。
如果有人对使用带有模板语言的gulp-file-include
插件有任何经验,我很想听听您如何解决它!
使用gulp-slim
和gulp-file-include
我有一个类似的[但不同]问题。 但是,我首先使用gulp编译HTML模板,然后使用slim的输出文件夹作为gulp-file-include的src HTML。 这意味着gulp-file-include会插入真实的HTML,而不是苗条的模板。
如您所料,缩进不再是这种方法的问题,但是我确实遇到了其他必须解决的问题。
苗条的如果我的代码看起来像:
.div-wrapper
| @@include('./dist/templates/_header.html')
| @@include('./dist/templates/_nav.html')
它将文本节点编译为单行,例如:
@@include('./dist/templates/_header.html')@@include('./dist/templates/_nav.html')
gulp-file-include不喜欢同一行上的指令(我相信),并且会引发错误。 我通过在它们之间放置一个一次性div来解决此问题。
.div-wrapper
| @@include('./dist/templates/_header.html')
.delete
| @@include('./dist/templates/_nav.html')
现在,输出将文本节点渲染到多行上,并且gulp-file-include正确地插入了带有非问题的缩进的部分。
但是,要正常工作,我必须正确使用gulps依赖链。 这意味着所有任务不能同时启动,您需要先明确地使模板语言来完成,然后再用gulp-file-include来完成。
我要提出一个问题,看看是否gulp-file-include可以在同一行上包含多个include来放松……因为那时生活会容易得多。
我的gulpfile的相关部分是:
var gulp = require('gulp');
var fileInclude = require('gulp-file-include');
var livereload = require("gulp-livereload");
var prettify = require('gulp-prettify');
var slim = require("gulp-slim");
var watch = require('gulp-watch');
var slimFiles = "./_pre-assets/slim/*.slim";
var slimOutput = "./dist/templates";
gulp.task('slim', function(){
return gulp.src(slimFiles)
.pipe(slim({
pretty: true
}))
.pipe(gulp.dest(slimOutput));
});
var htmlDist = "./dist/html";
var htmlTemplates = [
'./dist/templates/home.html',
'./dist/templates/standard.html',
]
gulp.task('fileInclude', ['slim'], function(){
return gulp.src(htmlTemplates)
.pipe(fileInclude({
basepath: '@root'
}))
.pipe(gulp.dest(htmlDist));
});
var htmlDistFiles = "./dist/html/*.html"
gulp.task('prettify', ['fileInclude'], function(){
return gulp.src(htmlDistFiles)
.pipe(prettify())
.pipe(gulp.dest('./dist/html/clean'));
});
gulp.task('watch', function(){
livereload.listen();
gulp.watch(slimFiles, ['slim', 'fileInclude', 'prettify']);
var watchDirs = [
'./dist/css/**',
'./dist/javascript/**',
'./dist/html/**',
]
gulp.watch(watchDirs).on('change', livereload.changed);
});
gulp.task('default', ['watch']);
可能会更清洁一点,但是您会明白的...如果您有兴趣,我也可以从sass
和babel
编译,并运行带有express
的本地服务器。 抱歉,此代码未经测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.