gulp-inject ничего не вводит в index.html

Я следую этому руководству по автоматизации хакернунга.

К сожалению, я застрял на шаге 6, который вводит использование gulp-inject.

Несмотря на дословное выполнение этих шагов, я получаю следующую ошибку в 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>

Я изучил этот вопрос, и до сих пор я сталкивался с рядом других проблем, которые также приводят к появлению сообщения "Ничего не вводить", но они, похоже, являются проблемой потоковой передачи, забывая указать место назначения файла или не требуя соответствующие пакеты глотка.

Я также приведу соответствующий код ниже, просто чтобы убедиться:

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>

Мы будем признательны за любые предложения, и спасибо, что нашли время, чтобы прочитать этот вопрос.

Источник

1 ответ

Я нашел решение своей проблемы, и я надеюсь, что кто-то найдет это полезным.

Вся ситуация никогда не была проблемой с gulp или его плагинами. Я использовал код Visual Studio в Windows 10, он автоматически обнаружил мой index.html как BE-кодировку UTF-16, поэтому что-то происходит, когда gulp выплевывает его, так как в результате кодирования получающийся файл получает странные символы - все это проблема кодирования...

Просто укажите в Visual Studio Code, что вы хотите сохранить документ в UTF-8, и все должно быть прекрасно (для этого посмотрите в правом нижнем углу окна редактора, там будет немного, где вы можете выбрать кодировку). ")

Вы можете сохранить документ в качестве определенной кодировки, нажав здесь в окне редактора (внизу справа)

Источник
Другие вопросы по тегам