gulp文件包含和翡翠嵌套问题

gulp-file-include and jade nesting problems

本文关键字：嵌套 问题 文件包 gulp      更新时间：2023-09-26

我正在自学Gulp，在使用Gulp文件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时遇到了类似但不同的问题。然而，我首先使用gull编译HTML模板，并使用slim的输出文件夹作为gull文件include的srcHTML。这意味着gulp文件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文件include不喜欢同一行上的指令(我相信(，并抛出了一个错误。我通过在它们之间放置一个一次性div来解决这个问题。

.div-wrapper
  | @@include('./dist/templates/_header.html')
  .delete
  | @@include('./dist/templates/_nav.html')

现在，输出将文本节点渲染到多行上，gulp-file-include可以正确地插入部分，缩进是不成问题的。

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

我打开一个问题，看看在同一行上有多个include是否可以让gull文件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运行本地服务器(如果有兴趣的话(。抱歉，此代码未经过测试。

相关文章：