Question

目前我正在使用 gulp-wiredep ，以便将脚本和样式注入我的index.html文件。

实际上，一切正常，但是当我尝试注入一个特定的css文件（select2.css）时，它不会出现在我的index.html中。

我的相应文件如下所示：

的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'
};

我已经尝试过＆＃34;覆盖＆＃34; bower.json就像我为bootstrap所做的那样，但它仍然无法工作。

如何解决此问题？任何已知的解决方案或想法？

希望你能帮帮我..

Gulp wiredep没有注入特定的css文件

0 个答案: