Gulp wiredep is not injecting a specific css file

637 views Asked by At

currently i'm working with gulp-wiredep in order to inject scripts and styles into my index.html file.

Actually, everything is working fine but when try to inject one specific css file (select2.css) it wont appear in my index.html.

My appropriate files look like this:

index.html

<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="../bower_components/metisMenu/dist/metisMenu.css" />
<link rel="stylesheet" href="../bower_components/fullcalendar/dist/fullcalendar.css" />
<link rel="stylesheet" href="../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
<!-- endbower -->
<!-- endbuild -->

bower.json

{
  "name": "inspinia",
  "version": "2.5.0",
  "dependencies": {
    "angular-animate": "~1.5.0",
    "angular-cookies": "~1.5.0",
    "angular-touch": "~1.5.0",
    "angular-sanitize": "~1.5.0",
    "angular-messages": "~1.5.0",
    "angular-aria": "~1.5.0",
    "jquery": "^3.1.1",
    "angular-resource": "~1.5.0",
    "angular-ui-router": "~0.2.15",
    "angular-bootstrap": "~1.1.2",
    "moment": "^2.17.1",
    "animate.css": "~3.4.0",
    "angular": "~1.5.0",
    "pace": "~1.0.2",
    "metisMenu": "~2.0.2",
    "fontawesome": "~4.5.0",
    "bootstrap-sass": "^3.3.7",
    "peity": "^3.2.1",
    "angular-peity-charts": "^0.0.3",
    "iCheck": "1.0.2",
    "fullcalendar": "^3.1.0",
    "jquery-slimscroll": "jquery.slimscroll#^1.3.8",
    "bootstrap-datepicker": "^1.6.4",
    "select2": "^4.0.3"
  },
  "devDependencies": {
    "angular-mocks": "~1.5.0",
    "select2": "^4.0.3"
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.woff",
        "dist/fonts/glyphicons-halflings-regular.woff2"
      ]
    },
    "fontawesome": {
      "main": [
        "less/font-awesome.less",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2"
      ]
    }
  },
  "resolutions": {
    "jquery": "~2.1.4",
    "angular": "~1.5.0",
    "moment": "~2.10.6"
  }
}

inject.js

gulp.task('inject', ['scripts', 'styles'], function () {
  var injectStyles = gulp.src([
    path.join(conf.paths.tmp, '/serve/app/**/**.css'),
    path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
  ], { read: false });

  var injectScripts = gulp.src([
    path.join(conf.paths.src, '/app/**/*.module.js'),
    path.join(conf.paths.src, '/app/**/*.js'),
    path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
    path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
  ])
  .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));

  var injectOptions = {
    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
    addRootSlash: false
  };

  return gulp.src(path.join(conf.paths.src, '/*.html'))
    .pipe($.inject(injectStyles, injectOptions))
    .pipe($.inject(injectScripts, injectOptions))
    .pipe(wiredep(_.extend({}, conf.wiredep)))
    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});

conf.js

var gutil = require('gulp-util');

exports.paths = {
  src: 'src',
  dist: 'dist',
  tmp: '.tmp',
  e2e: 'e2e'
};

exports.wiredep = {
  exclude: [/\/bootstrap-sass\.js$/, /\/bootstrap-sass\.css/],
  directory: 'bower_components'
};

I have already tried "overrides" whithin the bower.json like I did for bootstrap, but it still wont work.

How can I fix this behavior? Any known solutions or ideas?

Hope you can help me..

0

There are 0 answers