如何使用 gulp 在文件的特殊位置注入文件

Question

我要将一些 js 和 css 文件注入 index.html，我创建文件路径数组：

var paths = {
   js: [
      'a.js',
      '/b/b.js',
      '/c/d/d.js
   ],
   css: [
      'a/a.css',
      'b/b/b.css'
   ]
}

在我的 index.html 文件中：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>INDEX</title>
     <!-- inject:css -->
     <!-- endinject -->
 </head>
 <body>

 <!-- inject:js -->
 <!-- endinject -->

 <h1>Hello Index</h1>

 </body>
 </html>

我的 gulp 任务是：

 gulp.task('index', function () {
   var target = gulp.src('./index.html');

   var sources = gulp.src([paths.js, paths.css], {read: false});

   return target.pipe(inject(sources))
     .pipe(gulp.dest('./dest'));
 });

如何将这些文件放入 index.html？

Answer 1

使用gulp-inject包

inject = require('gulp-inject')

Gulp任务会是这样

gulp.task('TASK_NAME', function() {
  var target = gulp.src('./RAW.html');
  return target
    .pipe(inject(gulp.src([...]), {
      read: false
    }), {
      name: 'NAME_IN_HTML'
    }));
});

然后在 RAW.html 中插入：

<!-- inject:NAME_IN_HTML -->
<!-- endinject -->

如何使用 gulp 在文件的特殊位置注入文件

How to inject files in special place of file using gulp

gulp

gulp-inject