gulp-inject 无法注入bower安装的bootstrap里面的css到HTML页面
var gulp = require('gulp'),
loadPlugins = require('gulp-load-plugins'),
plugins = loadPlugins(),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
bowerFiles = require('main-bower-files'),
es = require('event-stream');
var src = {
scss: './app/sass/**/*.scss',
css: './app/css/**/*.css',
cssDir: './app/css',
js: './app/js/**/*.js',
html: './app/index.html'
}
var dest = {
css: './dist/css',
cssFiles: './dist/css/**/*.css',
js: './dist/js',
jsFiles: './dist/js/**/*.js'
}
gulp.task('sass', function(){
return gulp.src(src.scss)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.changed(dest.css))
.pipe(plugins.sass())
.pipe(plugins.autoprefixer())
.pipe(plugins.sourcemaps.write())
.pipe(gulp.dest(dest.css))
.pipe(browserSync.stream());
});
gulp.task('copy', ['sass'], function(){
return gulp.src(dest.cssFiles)
.pipe(plugins.changed(src.css))
.pipe(gulp.dest(src.cssDir));
});
gulp.task('js', function(){
return gulp.src(src.js)
.pipe(plugins.jshint())
// .pipe(plugins.uglify())
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest(dest.js));
});
gulp.task('htmlhint', function(){
return gulp.src(src.html)
.pipe(plugins.htmlhint())
.pipe(plugins.htmlhint.reporter());
});
gulp.task('inject', function(){
return gulp.src(src.html)
.pipe(plugins.inject(gulp.src(bowerFiles()), {name: "bower", relative: true}))
.pipe(plugins.inject(es.merge(gulp.src('./dist/js/*.js'), gulp.src('./dist/css/*.css')), {relative: true}))
.pipe(gulp.dest('./app'));
});
gulp.task('server', function(){
var files = [src.css, src.js, src.scss, src.html];
browserSync.init(files, {
server: {
baseDir: ['./app','./']
},
open: true
});
});
gulp.task('watch',['server','sass','copy','js','inject','htmlhint'], function(){
gulp.watch(src.scss, ['copy']);
gulp.watch(dest.cssFile).on('change', reload);
gulp.watch(src.html, ['htmlhint']).on('change', reload);
gulp.watch([src.js, dest.jsFiles], ['js']).on('change', reload);
});
执行gulp inject之后的HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- bower:css -->
<!-- endinject -->
<!-- inject:css -->
<link rel="stylesheet" href="../dist/css/index.css">
<!-- endinject -->
</head>
<body>
<div class="box"></div>
<span>hello</span>
<p>world!</p>
<div style="width: 100px; height: 100px; border-radius: 50%; border: 2px solid red;"></div>
<span>Hi, gulp</span>
<div>google</div>
</body>
<!-- bower:js -->
<script src="../vendor/jquery/dist/jquery.js"></script>
<script src="../vendor/bootstrap/dist/js/bootstrap.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="../dist/js/app.js"></script>
<!-- endinject -->
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
你的
html里也没加placeholders啊？来，咱们看官网文档：看到了么，要注入
css和js的部位，你得先在html里定义好啊这是源文件
这是编译后的文件
bower安装的js正确引入了，但是css没有引入。
在 /bower_components/bootstrap/.bower.json
把这个
"main": [
我想问你的问题最后解决了吗啊？？最后怎么解决的？我现在也遇到跟你同样的问题