1

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.

Zhanli
  • 21
  • 3
  • I used your code exactly and it worked perfectly. Are you sure of your paths? Your .css files are in src/someDirOrNot/someFileName.css ? Otherwise I would uninstall gulp-inject and reinstall it. – Mark Apr 07 '18 at 01:38
  • Hi Mark, thanks for commenting! I've checked my paths, and changed them to sit inside a folder to see if that makes a difference: "/src/css/style.css" and "/src/js/script.js". But no change to the problem - gulp-inject is still reporting there's nothing to inject, and the index.html still has the same problem. I've also uninstalled gulp-inject and reinstalled it, and it's not changed anything. Do you think there may be an issue with my windows setup? I'm assuming mac/linux users aren't runnning into this issue... but that's just an assumption. – Zhanli Apr 08 '18 at 21:34
  • I am using Windows 10. What if you changed the two inject lines to one: .pipe(inject( css.concat(js) , { relative:true } )) – Mark Apr 08 '18 at 21:42
  • I'm afraid you'll have to elaborate on how to inject two lines at once, the syntax you pasted isn't working (also is it possible to concatenate css into js...? I'm assuming you're using gulp-concat?). I couldn't find anything that matches what you wrote in the gulp-inject docs unfortunately. – Zhanli Apr 10 '18 at 10:51
  • So I've done some further experiments, namely just trying to get gulp-inject to work at all: I took the basic use example code from [link](https://www.npmjs.com/package/gulp-inject#basic-usage) and it's still not injecting anything - creating the same problem as I've described in the question above. So I know it's not anything else I've added to the project thus far - something is wrong with gulp-inject on my setup... – Zhanli Apr 10 '18 at 14:01
  • also, if this helps, these are the symbols I get when I open up the resulting index.html in notepad (because VScode refuses to read it): 뿯붿 – Zhanli Apr 10 '18 at 14:37

1 Answers1

1

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)

Zhanli
  • 21
  • 3