我用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