如何使用 Gulp 将标记与内容分开？

【问题标题】：How to keep markup separate from content with Gulp?如何使用 Gulp 将标记与内容分开？
【发布时间】：2015-09-15 04:05:32
【问题描述】：

我想将我的内容与 HTML 分开。我不想使用任何 HTML 模板引擎，如 Jade、HAML 等。我只想使用原始 HTML。

我正在使用 gulp 生成 html 页面

例如

content1 = <p>content of content 1</p>

content2 = <h4>content of content 2</h4>

在page1.html中

<div class="content">
 <p>content of content 1</p>
</div>

在page2.html中

<p class="content">
 <h4>content of content 2</h4>
</p>

【问题讨论】：

标签： javascript html npm preprocessor gulp

【解决方案1】：

你需要使用 gulp-inject 插件 https://www.npmjs.com/package/gulp-inject

var inject = require('gulp-inject')

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
</head>
<body>
<div>
  <!-- inject:content:html -->
    <!-- contents of html partials will be injected here -->
  <!-- endinject -->
</div>
</body>
</html>

gulp.src('./src/index.html')
  .pipe(inject(gulp.src(['./src/partials/content.html']), {
    starttag: '<!-- inject:content:{{ext}} -->',
    transform: function (filePath, file) {
      // return file contents as string 
      return file.contents.toString('utf8')
    }
  }))
  .pipe(gulp.dest('./dest'));

【讨论】：

我不想在我的 gulpfile 中引用每个组件的内容
你可以为这些任务创建一个单独的 gulpfile，并用你的主 gulpfile 调用它，也许对你没问题