CODEWITHSUNDEEP
gulpgulp-inject
Darren Guy
Darren Guy

Reputation: 1153

gulp-inject. Do not want to include build folder in output

I have the following folder structure

_build
src
|- \images
|- \js
|- \sass

I have built a gulp process so that when finished my .build folder will contain my finished solution

i.e

_build\index.html
_build\images\*.*
_build\js\site.min.js
_build\css\site.css

I have got my gulp task to compile my sass files, and the generated file is being correctly saved into the _build\css folder

Now within my index.html file, I have the following within the head element

<!-- inject:css -->
<!-- endinject -->

Now what I am trying to get is get the following injected

<link rel="stylesheet" href="css/site.css">

but what I keep on ending up with in 

<link rel="stylesheet" href="/_build/css/site.css">

This is my gulp task to do the inject. p.s. I am using gulp-load-plugins aliased to $

gulp.task('inject', function() {
    return gulp
        .src('./src/index.html')
        .pipe($.inject(gulp.src('./build/css/site.css', {read: false}), {relative: true}))
        .pipe(gulp.dest('./_build/'));
});

Based on my interpretation of reading the documentation on https://www.npmjs.com/package/gulp-inject, using the relative option it should not include /_build/ in the output. However it is not being excluded.

How do I configure gulp-inject to properly excludethe /_build/ path

Upvotes: 0

Views: 64

Answers (1)

Wilmer SH
Wilmer SH

Reputation: 1417

You are telling inject to use the relative path to the file. But relative to what? Well, relative to the source of your injection.

If your source is:

./build/css/site.css

You are going up a directory in the tree so inject is standing at ./ where ever that may be. Meaning, build/css/site.css is the correct relative path.

Now if your source on the other hand is:

build/css/site.css

The relative path to the css is /css/site.css.

Long story short. Call inject from the correct directory:

gulp.task('inject', function() {
    return gulp

        .src('./src/index.html')
        .pipe($.inject(gulp.src('build/css/site.css', {read: false}), {relative: true}))
        .pipe(gulp.dest('./_build/'));
});

Eliminate the ./

Edit

You may need to change and play with your cwd (current working directory)

Upvotes: 0

Related Questions