如何使用gulp连接js / css文件并替换为html？

misterion 发表于 Dev

薄雾

这里有很多问题和答案，如何在模板中进行资产的补充或替换。使用grunt-concat合并文件，使用gulp-html-replace到的模板替换。而且我不明白如何将它们彼此连接。

因此，给定模板，friends.tpl并带有特殊的css文件集：

!DOCTYPE html>
<html>
<head>
    <!-- build:css friends.min.css -->
    <link rel="stylesheet" href="css/component1/style.css">
    ...
    <link rel="stylesheet" href="css/componentN/style.css">
    <!-- /build -->
</head>
<body/>

理想的结果

!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/friends.min.css">
</head>
<body/>

并使用上面的串联文件创建了friends.min.css文件。

如何实现这一点-基于模板数据的concat

蒂亚戈·弗雷塔斯（Thiago Freitas）

使用gulp-htmlbuild，它可以满足您的需求。

gulp.task('build', function () {


gulp.src(['./index.html'])
    .pipe(htmlbuild({
      // build js with preprocessor 
      js: htmlbuild.preprocess.js(function (block) {

    // read paths from the [block] stream and build them 
    // ... 

    // then write the build result path to it 
    block.write('buildresult.js');
    block.end();

  })
}))
.pipe(gulp.dest('./build'));
});

gulp构建将采用index.html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>

    <!-- htmlbuild:js -->
    <script src="js/script1.js"></script> 
    <script src="js/script2.js"></script> 
    <!-- endbuild -->

  </body>
</html>

并将其转换为：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>

    <script src="buildresult.js"></script> 

  </body>
</html>

https://www.npmjs.com/package/gulp-htmlbuild

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。