Geek Answers Handbook

Gulp cannot inject css and js at the same time

I am trying to run the following code

var $ = require('gulp-load-plugins')({ lazy: true }); // fetches gulp plugins

 gulp.task('wiredep', function () { var wiredep = require('wiredep').stream; return gulp .src(config.index) .pipe(wiredep(config.wiredepDefaultOptions)) //wiredep injection configuration .pipe($.inject(gulp.src(config.js))) //custom js files configuation .pipe(gulp.dest(config.client)) }); /* inject bower and other injections */ gulp.task('inject', ['styles-compile', 'wiredep'], function () { return gulp .src(config.index) .pipe($.inject(gulp.src(config.css))) .pipe(gulp.dest(config.client)) });

// if I comment on the following line .pipe($.inject(gulp.src(config.css)))

Then my .js files receive an injection, otherwise they do not, from what I understand, this injection takes place in parallel.

What am I doing wrong?

+6
source share
1 answer

gulp-inject will only enter one set of files, replacing the old set with a new set every time you call it. There are two ways to solve the problem.

1) On the gulp-inject github: page, use the event-stream plugin to combine the two file name streams (.css and .js) into one stream that you pass for input.

 var es = require('event-stream'), inject = require('gulp-inject'); // Concatenate vendor scripts var vendorStream = gulp.src(['./src/vendors/*.js']) .pipe(concat('vendors.js')) .pipe(gulp.dest('./dist')); // Concatenate AND minify app sources var appStream = gulp.src(['./src/app/*.js']) .pipe(concat('app.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); gulp.src('./src/index.html') .pipe(inject(es.merge(vendorStream, appStream))) .pipe(gulp.dest('./dist'));

2) An alternative solution that might suit your current code organization better is to use the gulp-inject name parameter to define two different places for input. So you have a header file:

 <!DOCTYPE html> <html> <head> <title>My index</title> <!-- styles:css --> <!-- the styles files will be injected here --> <!-- endinject --> </head> <body> <!-- scripts:js --> <!-- the scripts files will be injected here --> <!-- endinject --> </body> </html>

and then your gulpfile.js contains something like:

 var inject = require('gulp-inject'); gulp.src('./src/index.html') .pipe(inject(gulp.src('./config.css'), {name: 'styles'})) .pipe(inject(gulp.src('./config.js'), {name: 'scripts'})) .pipe(gulp.dest('./dist'));
+6
source

More articles:


All Articles