Javascript gulp文件包含和jade嵌套问题

我在自学如何吞咽，并且在使用and时遇到了一个问题，这依赖于正确的标记缩进

---

gulpfileinclude

成功地包含了部分内容（用于页脚和导航），但当包含这些部分时，会弄乱翡翠的缩进。显然，错误缩进的Jade文件将产生错误嵌套的HTML

app/index.jade

body
   ul.navbar
      h1.logo
        | Logo

    .container
      | Lorem Ipsum...

    .footer
      @@include('./_footer.jade')

app/\u 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（'./\u footer.jade'）

清楚地嵌套在代码中的

.footer

下，但

\u footer.jade的内容在外部呈现

如果有人有使用这个
gulp文件的经验，包括带有模板语言的插件，我很想听听你是如何解决的
 我在使用
gulp slim
和
gulp file include
时遇到类似[但不同]的问题。然而，我首先使用gulp编译HTML模板，并使用slim的输出文件夹作为gulp文件include的src HTML。这意味着gulpfileinclude将插入真正的HTML而不是slim模板

正如您所猜测的，缩进不再是这种方法的问题，但我确实遇到了其他必须解决的问题

在slim中，如果我的代码如下所示：

.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会正确地插入片段，缩进不是问题

但是，为了让它正常工作，我必须正确地使用glups依赖链。这意味着所有任务不能同时启动，您需要显式地让模板语言先做它自己的事情，然后让gulp文件包含后做它自己的事情

我正在打开一个问题，看看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
运行一个本地服务器。很抱歉，此代码未经测试。
gulp file include
旨在解析HTML，使模板缩进难以使用（不可能？）。在第二个任务中，
gulpfileinclude
编译部分之前，我采用了将模板编译成HTML的方法。请参阅答案。请注意，与使用针对此应用程序结构设计的工具（如Ruby Middleman Gem）相比，这是一项艰巨的任务。