我正在使用本教程设置一个角度为2和gulp的项目。 http://blog.codeleak.pl/2016/03/quickstart-angular2-with-typescript-and.html
我做的唯一改变是我在package.json中添加了bootstrap,但它并没有在浏览器中显示。它显示在IDE中我的项目中的node_modules和lib文件夹中。但是如果我使用bootstrap类,它们就不会被应用了。 bootstrap.min.css文件也没有在浏览器中显示。
我将关于bootstrap的2行添加到我的gulp文件
gulp.task("libs", () => {
return gulp.src([
'es6-shim/es6-shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**',
'zone.js/dist/**',
'@angular/**',
'bootstrap/dist/js/bootstrap.min.js',
'bootstrap/dist/css/bootstrap.min.css'
], {cwd: "node_modules/**"}) /* Glob required here. */
.pipe(gulp.dest("build/lib"));
});
我在index.html中添加了这一行以包含它
<link rel="stylesheet" type="text/css" src="lib/bootstrap/dist/css/bootstrap.min.css">
这是我的项目结构
编辑:为了澄清,我看到IDE中的lib文件夹中复制了bootstrap.css文件,但我在浏览器中看不到它。请参阅Chrome开发工具下面的截图关于我可能遗失的任何线索? Github回购 - https://github.com/richa008/Angular-starter-app-with-gulp
答案 0 :(得分:0)
这应导入所有相关文件和目录:
gulp.task("libs", () => {
return gulp.src([
'es6-shim/es6-shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**',
'zone.js/dist/**',
'@angular/**',
'bootstrap/dist/**/*.+(js|css.map|css|eot|svg|ttf|woff|woff2)'
], { cwd: "node_modules/**" }) /* Glob required here. */
.pipe(gulp.dest("build/lib"));
});