Question

我正在教自己Gulp并使用gulp-file-include和Jade遇到问题 - 这依赖于正确的标记缩进。

gulp-file-include成功地包含了部分内容（例如页脚和导航等内容），但是当它包含这些部分内容时会弄乱玉的缩进。显然，错误缩进的Jade文件会产生错误的嵌套HTML。

应用程序/ index.jade

body
   ul.navbar
      h1.logo
        | Logo

    .container
      | Lorem Ipsum...

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

应用程序/ _footer.jade

.footer-content
  | hello
  a(href) my link

应用程序/ 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的内容在外面呈现。< / p>

如果有任何人有使用此gulp-file-include插件和模板语言的经验，我有兴趣听听您是如何解决它的！

Answer 1

我使用gulp-slim与gulp-file-include有类似[但不同]的问题。但是，我首先使用gulp编译HTML模板，并使用slim的输出文件夹作为gulp-file-include的src HTML。这意味着gulp-file-include会插入真实的HTML而不是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正确地插入了缩进是非问题的部分。

但是，为了使工作正常，我必须正确使用gulps依赖链。意味着所有任务都不能同时触发，你需要明确地让模板语言先做它，然后让gulp-file-include做第二件事。< / p>

我打开一个问题，看看gulp-file-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如果它＆＃ 39;有兴趣的。抱歉，此代码未经过测试。

gulp-file-include和jade nesting问题

1 个答案: