CODEWITHSUNDEEP
automationgulprelative-pathgulp-inject
Zhanli
Zhanli

Reputation: 21

gulp-inject is not injecting anything to index.html

I am following this hackernoon gulp automation tutorial.

Unfortunately I have become stuck on Step 6 that introduces the use of gulp-inject.

Despite following the steps verbatim, I receive the following error in windows Powershell (I'm developing on a windows machine): 

gulp-inject Nothing to inject into index.html.

It also produces an HTML document that has some unknown (to me at least) encoded characters. Here is the code from the index.html:

��<�!DOCTYPE html>

<�html>

  <�head>

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



    <�!-- inject:css -->

    <�!-- endinject -->

  <�/head>

  <�body>

    <�!-- inject:js -->

    <�!-- endinject -->

  <�/body>

<�/html>

I have looked into the matter, and so far I've come across several other issues that also produce either the "Nothing to inject" message, but they seem to either be a streaming issue, forgetting to set a file destination, or not requiring relevant gulp packages.

I'll provide the relevant code below as well, just to make sure:

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));
});

relevant snippet from 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 (from the src directory)

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

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

Any leads would be most appreciated, and thank you for taking the time to read this question.

Upvotes: 1

Views: 1008

Answers (1)

Zhanli
Zhanli

Reputation: 21

I've found the solution to my issue, and I hope someone else finds this helpful.

The whole situation was never a problem with gulp or its plugins. It was my use of Visual Studio Code on Windows 10, it automatically detected my index.html as UTF-16 BE encoding, hence something occurs when gulp spits it out as that encoding the resulting file gets weird symbols - it's all an encoding issue...

Simply specify in Visual Studio Code that you want to save the document in UTF-8 and all should be dandy (to do this, look at the bottom right corner of the editor window, there'll be a bit where you can 'select encoding')

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

Upvotes: 1

Related Questions