Question

我正在关注此hackernoon gulp automation tutorial.

不幸的是，我已经陷入第6步，它引入了gulp-inject的使用。

尽管逐字地执行了这些步骤，但我在Windows Powershell中收到以下错误（我在Windows机器上开发）：

gulp-inject Nothing to inject into index.html.

它还会生成一个HTML文档，其中包含一些未知（至少对我来说）编码的字符。以下是index.html中的代码：

ï¿½ï¿½&lt;�!DOCTYPE html&gt;

&lt;�html&gt;

  &lt;�head&gt;

    &lt;�!-- src/index.html --&gt;



    &lt;�!-- inject:css --&gt;

    &lt;�!-- endinject --&gt;

  &lt;�/head&gt;

  &lt;�body&gt;

    &lt;�!-- inject:js --&gt;

    &lt;�!-- endinject --&gt;

  &lt;�/body&gt;

&lt;�/html&gt;

我已经调查了这个问题，到目前为止，我还遇到了其他一些问题，这些问题也产生了无法注入的问题。消息，但它们似乎是streaming issue，forgetting to set a file destination或not requiring relevant gulp packages.

我也会在下面提供相关代码，以确保：

gulpfile.js

// gulpfile.js
var gulp = require('gulp');
var inject = require('gulp-inject');

var paths = {
  src: 'src/**/*',
  srcHTML: 'src/**/*.html',
  srcCSS: 'src/**/*.css',
  srcJS: 'src/**/*.js',

  tmp: 'tmp',
  tmpIndex: 'tmp/index.html',
  tmpCSS: 'tmp/**/*.css',
  tmpJS: 'tmp/**/*.js',

  dist: 'dist',
  distIndex: 'dist/index.html',
  distCSS: 'dist/**/*.css',
  distJS: 'dist/**/*.js'
};

gulp.task('default', function () {
  console.log('Hello World!');
});

gulp.task('html', function () {
  return gulp.src(paths.srcHTML).pipe(gulp.dest(paths.tmp));
});

gulp.task('css', function () {
  return gulp.src(paths.srcCSS).pipe(gulp.dest(paths.tmp));
});

gulp.task('js', function () {
  return gulp.src(paths.srcJS).pipe(gulp.dest(paths.tmp));
});

gulp.task('copy', ['html', 'css', 'js']);

gulp.task('inject', ['copy'], function () {
  var css = gulp.src(paths.tmpCSS);
  var js = gulp.src(paths.tmpJS);
  return gulp.src(paths.tmpIndex)
    .pipe(inject( css, { relative:true } ))
    .pipe(inject( js, { relative:true } ))
    .pipe(gulp.dest(paths.tmp));
});

来自package.json的

相关摘录

  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-debug": "^3.2.0",
    "gulp-header": "^2.0.5",
    "gulp-inject": "^4.3.2",
    "gulp-load-plugins": "^1.5.0"
  },
  "dependencies": {}

index.html（来自src目录）

<!DOCTYPE html>
<html>
  <head>
    <!-- src/index.html -->

    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body>
    <!-- inject:js -->
    <!-- endinject -->
  </body>
</html>

任何线索都会非常感激，感谢您花时间阅读这个问题。

Answer 1

我找到了解决问题的方法，我希望其他人认为这有用。

整个情况从来都不是gulp或其插件的问题。这是我在Windows 10上使用Visual Studio Code，它会自动检测到我的index.html为UTF-16 BE编码，因此当gulp将其吐出时会发生一些事情，因为编码生成的文件会产生奇怪的符号 - 它全部都是编码问题......

只需在Visual Studio代码中指定要以UTF-8保存文档，所有内容都应该是花花公子（要做到这一点，请查看编辑器窗口的右下角，那里有一点在哪里您可以选择编码＆＃39;）

you can save your doc as a specific encoding by clicking here on the editor window (the bottom right)

gulp-inject没有向index.html注入任何东西

1 个答案: