1

我正在关注这个hackernoon gulp自动化教程。

不幸的是，我卡在了介绍 gulp-inject 使用的第 6 步。

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

gulp-inject Nothing to inject into index.html.

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

��<�!DOCTYPE html>

<�html>

  <�head>

    <�!-- src/index.html -->



    <�!-- inject:css -->

    <�!-- endinject -->

  <�/head>

  <�body>

    <�!-- inject:js -->

    <�!-- endinject -->

  <�/body>

<�/html>

我已经调查了此事，到目前为止，我遇到了其他几个问题，这些问题也产生了“Nothing to injection”消息，但它们似乎要么是流问题，要么忘记设置文件目标，要么不需要相关的 gulp 包。

我还将在下面提供相关代码，以确保：

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>

任何线索将不胜感激，并感谢您花时间阅读此问题。

4

1 回答 1

1

我找到了解决我的问题的方法，我希望其他人觉得这很有帮助。

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

只需在 Visual Studio Code 中指定您想要以 UTF-8 保存文档，所有内容都应该是花花公子（要做到这一点，请查看编辑器窗口的右下角，您可以在其中“选择编码” ')

您可以通过单击编辑器窗口（右下角）上的此处将您的文档保存为特定编码

于 2018-04-20T12:45:13.797 回答