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>

你的html里也没加placeholders啊？来，咱们看官网文档：

看到了么，要注入css和js的部位，你得先在html里定义好啊

【热门文章】