Question

我希望将我的内容与HTML分开。我不想使用像Jade，HAML等任何HTML模板引擎。我想只使用原始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>

Answer 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'));

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

1 个答案: