css not injecting

[PostImpatica]

Using gulp-inject 1.5.0 and NPM 2.14.3 and Node v4.1.0 on an OSX 10.10.5 mac. For some reason i could inject javascript and bower css no issue. But injecting my own css would not work, for some reason it had something to do with the inject:css comment. For shits and giggles i added a second inject:css comment group and the first one that wasn't working now works. I new my gulp code was fine because it kept saying 8 files added but they wouldn't show up. Very bizarre but at least i can now move on. Here's what my head on my html template ended up looking like:

<!-- build:css styles/lib.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->

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

<!-- build:css styles/app.css -->
<!-- inject:css -->
<!-- endinject -->
<!-- endbuild -->

After adding the middle section, the bottom section (the original) started working.

[PostImpatica]

You are welcome to close this issue, i just wanted it for reference in case someone else runs into this.

[joakimbeng]

This sounds odd. Please provide an example on how you're using gulp-inject in your gulpfile when getting this issue, it's impossible to help otherwise.

[PostImpatica]

Here is my gulpfile. Thx!

var gulp = require('gulp');
var del = require('del');
var wiredep = require('wiredep').stream;
var clay = require('gulp-load-plugins')({lazy: true});
var series = require('stream-series');
var vinylPaths = require('vinyl-paths');
var browserSync = require('browser-sync').create();
var config = require('./gulp.config')(); //the '()' is so it executes.
var bowerFiles = require('main-bower-files');
var es = require('event-stream');

gulp.task('fonts', function() {
    log('Copying fonts');
    return gulp.src(config.myfonts, {cwd: __dirname + '/buildsrc/'})
    .pipe(gulp.dest('www/fonts'));
});

gulp.task('images', function() {
    log('Copying images');
    return gulp.src(config.myimages, {cwd: __dirname + '/buildsrc/'})
    .pipe(clay.imagemin({
        optimizationLevel: 4
    }))
    .pipe(gulp.dest('www/icons'));
});

gulp.task('styles', function() {
    log('Converting your Less to standard CSS');
    return gulp
    //we don't have to use config but it will make things cleaner in large projects
        .src(config.myless, {cwd: __dirname + '/buildsrc/'})
    //before working on the files, lets add error output helper that also
    //keeps the watch running after finding an error, instead of stopping.
    .pipe(clay.plumber())
    .pipe(clay.less())
    .pipe(gulp.dest('buildsrc/'));
});

gulp.task('clean', function () {
  return gulp.src(['./www/*', './buildsrc/js/**/*.css', './buildsrc/templates/**/*.css','./buildsrc/js/templates.js', './buildsrc/css/styles.css', './buildsrc/templates/**/*.css'])
    .pipe(vinylPaths(del));
});

gulp.task('serve', function() {
    browserSync.init({
        server: "./www"
    });
    gulp.watch("./buildsrc/**/*.*", ['default']);
    gulp.watch("./www/*.*").on('change', browserSync.reload);
});

gulp.task('default', ['index','fonts', 'images']);

gulp.task('index', ['move'], function(){
    var indexjs = gulp.src(config.myindexjs,  {cwd: __dirname + '/buildsrc/'});
    var sources = gulp.src([].concat(config.myjs, '**/*.css'), 
        {read: false, cwd: __dirname + '/buildsrc/'});

    gulp.src('./buildsrc/index.html')
    .pipe(clay.inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower'}))
    .pipe(clay.inject(es.merge(
      series(sources, indexjs )
      )))
     .pipe(clay.replace(/\"\//mg, '"')) //remove the first '/' from any path
    .pipe(gulp.dest('./www'));
});

gulp.task('move', ['templatecache'], function(){
  gulp.src(['./buildsrc/**/*.js'], { base: './buildsrc' })
    .pipe(gulp.dest('./www/'));
  gulp.src(['./buildsrc/**/*.css'], { base: './buildsrc' })
    .pipe(gulp.dest('./www/'));   
  gulp.src(bowerFiles(), { base: './bower_components' })
    .pipe(gulp.dest('./www/bower_components'));
});

gulp.task('templatecache', ['styles'], function() {
    console.log('Createing AngularJS $templateCache');
    return gulp
        .src(config.myhtmltemplates)
    //empty: true - will force the inclusion of empty html tags
    .pipe(clay.minifyHtml({
        empty: true
    }))
    .pipe(clay.angularTemplatecache(
        config.mytemplateCache.file,
        config.mytemplateCache.options
    ))
    .pipe(gulp.dest('buildsrc/js/'));
});

///FUNCTIONS!

function log(msg) {
    if (typeof(msg) === 'object') {
        for (var item in msg) {
            if (msg.hasOwnProperty(item)) {
                clay.util.log(clay.util.colors.blue(msg[item]));
            }
        }
    } else {
        clay.util.log(clay.util.colors.blue(msg));
    }
}

[joakimbeng]

Do you experience the same issue with the latest gulp-inject?

[francisrod01]

The same problem.

https://github.com/paislee/healthy-gulp-angular/issues/14