Gulp 不能同时注入 css 和 js答案

【问题标题】：Gulp cannot inject css and js at the same timeGulp 不能同时注入 css 和 js
【发布时间】：2015-09-16 03:52:29
【问题描述】：

我正在尝试运行以下代码

var $ = require('gulp-load-plugins')({ lazy: true }); // fetches gulp plugins

gulp.task('wiredep', function () {
     var wiredep = require('wiredep').stream;

    return gulp
    .src(config.index)
    .pipe(wiredep(config.wiredepDefaultOptions))      //wiredep injection configuration
    .pipe($.inject(gulp.src(config.js)))              //custom js files configuation
    .pipe(gulp.dest(config.client))
});



/* inject bower and other injections */
   gulp.task('inject', ['styles-compile', 'wiredep'], function () {
     return gulp
       .src(config.index)
       .pipe($.inject(gulp.src(config.css)))
       .pipe(gulp.dest(config.client))
});

// 如果我评论以下行 .pipe($.inject(gulp.src(config.css)))

然后我的 .js 文件会被注入，否则它们不会被注入，据我所知，这种注入是并行发生的。

我做错了什么？

【问题讨论】：

为什么不能使用简单的gulp.src。你能解释一下$.inject 是做什么的吗？
$.inject 与 gulp-inject 相同，我安装了“gulp-load-plugins”，它加载了 var $ = require('gulp-load-plugins')({懒惰：真 }); // 获取 gulp 插件

标签： gulp gulp-inject

【解决方案1】：

gulp-inject 只会注入一组文件，每次调用时都会用新集替换旧集。有两种方法可以解决这个问题。

1) 从gulp-inject github 页面：使用event-stream 插件将两个文件名流（.css 和 .js）组合成一个流，然后传递给注入。

var es = require('event-stream'),
    inject = require('gulp-inject');

// Concatenate vendor scripts
var vendorStream = gulp.src(['./src/vendors/*.js'])
  .pipe(concat('vendors.js'))
  .pipe(gulp.dest('./dist'));

// Concatenate AND minify app sources
var appStream = gulp.src(['./src/app/*.js'])
  .pipe(concat('app.js'))
  .pipe(uglify())
  .pipe(gulp.dest('./dist'));

gulp.src('./src/index.html')
  .pipe(inject(es.merge(vendorStream, appStream)))
  .pipe(gulp.dest('./dist'));

2) 另一种可能更适合您当前代码组织的解决方案是使用gulp-inject name 参数来定义两个不同的注入位置。因此你有一个这样的头文件：

<!DOCTYPE html>
<html>
  <head>
    <title>My index</title>
  <!-- styles:css -->
  <!-- the styles files will be injected here -->
  <!-- endinject -->
</head>
<body>

  <!-- scripts:js -->
  <!-- the scripts files will be injected here -->
  <!-- endinject -->
</body>
</html>

然后你的gulpfile.js 包含类似：

var inject = require('gulp-inject');

gulp.src('./src/index.html')
  .pipe(inject(gulp.src('./config.css'), {name: 'styles'}))
  .pipe(inject(gulp.src('./config.js'), {name: 'scripts'}))
  .pipe(gulp.dest('./dist'));

【讨论】：