首页 > 用Swiip/generator-gulp-angular如何添加自定义的bootstrap

用Swiip/generator-gulp-angular如何添加自定义的bootstrap

我用Swiip/generator-gulp-angular生成的项目来开发,一开始用的是从bower下载的bootstrap,经过gulp build,可以和其他依赖文件合并为一个css文件和一个js文件。但是我并不需要完整的bootstrap,我从官网也看到bootstrap是可以定制的,我定制完成后,下载得到bootstrap.css。我在index.html里手动插入link来引用bootstrap.css如下:

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
  <!-- bower:css -->
  <!-- run `gulp inject` to automatically populate bower styles dependencies -->
  <!-- endbower -->
  <link rel="stylesheet" href="bower_components/bootstrap/css/bootstrap.css">
  <!-- endbuild -->
  <!-- build:css({.tmp/serve,src}) styles/app.css -->
  <!-- inject:css -->
  <!-- css files will be automatically insert here -->
  <!-- endinject -->
  <!-- endbuild -->

这样做在运行gulp serve时没问题,但是运行gulp build就出问题了,这个bootstrap.css并没有合并到最终的css文件里,被忽略了,请做过的人告诉我该如何实现,多谢


首先,bootstrap是通过wiredep插件注入的,你如果不想使用原生的bootstrap的话,你可以在bower.json中,修改它的路径,指向你的文件, 请看overrides中的bootstrap中的路径:

{
  "name": "test",
  "version": "0.0.0",
  "dependencies": {
    "angular-animate": "~1.4.2",
    "angular-cookies": "~1.4.2",
    "angular-touch": "~1.4.2",
    "angular-sanitize": "~1.4.2",
    "angular-messages": "~1.4.2",
    "angular-aria": "~1.4.2",
    "jquery": "~2.1.4",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "~3.3.5",
    "angular-bootstrap": "~0.13.4",
    "malarkey": "yuanqing/malarkey#~1.3.1",
    "angular-toastr": "~1.5.0",
    "moment": "~2.10.6",
    "animate.css": "~3.4.0",
    "angular": "~1.4.2"
  },
  "devDependencies": {
    "angular-mocks": "~1.4.2"
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.css",
        "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"
      ]
    }
  },
  "resolutions": {
    "jquery": "~2.1.4",
    "angular": "~1.4.2"
  }
}

刚好我最近也在玩这个,有兴趣的话,一起研究研究
https://github.com/hjzheng/angular-es6-practice

【热门文章】
【热门文章】