gulp-file-include和玉石嵌套問題

Question

我正在自學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插件有任何經驗，我很想聽聽您如何解決它！

Answer 1

使用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的本地服務器。 抱歉，此代碼未經測試。