【笔记】Gulp的GulpInject插件

发表于 更新于 阅读次数：

前言

Gulp通过GulpInject插件实现<script>、<link>标签注入

下载依赖

1
npm install -D gulp-inject

在HTML文件中定义挂载点

src/index.html
1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <title>Title</title>
    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body>
    <!-- inject:js -->
    <!-- endinject -->
  </body>
</html>

修改配置文件

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
const gulp = require("gulp");
const inject = require("gulp-inject");

function fn() {
  return gulp.src("./dist/**/*.html")
      .pipe(inject(gulp.src(["./src/**/*.js", "./src/**/*.css"])))
      .pipe(gulp.dest("./dist"));
}

module.exports = {
  fn
}

完成