javascript - 如何在 Gulp 中将特定的凉亭组件添加为 IE8 条件块

Question

我有几个凉亭组件，其中我需要一些组件，例如，json3添加到 IE8 条件块中（在构建和服务中），如下所示：respondjses5shim

<!--[if lt IE 9]> <script src="bower_components/json3/json3.js"></script> <![endif]-->

我应该如何继续编写任务？我找不到任何适合gulp-inject这个wiredep问题的例子。请指教

Answer 1

使用gulp-filter和gulp-inject 的 starttag option是可能的。

假设您在 中定义了以下注入index.html：

<!--[if lt IE 9]>
<![endif]-->
<!-- inject:js -->
<!-- endinject -->

您可以在 gulpfile 中连接它们：

var gulp = require('gulp')
var bowerFiles = require('main-bower-files');
var gulpFilter = require('gulp-filter');
var gulpInject = require('gulp-inject');

gulp.task('wiredep', function() {
    var ie8Files = ['**/json3.js', '**/es5shim.js'];
    // the same as: var restFiles = ['*', '!**/json3.js', '!**/es5shim.js'];
    var restFiles = ['*'].concat(ie8Files.map(function(e) { return '!' + e;}));
    return gulp.src('index.html')
    .pipe(gulpInject(gulp.src(bowerFiles(), {read: false}).pipe(gulpFilter(restFiles))))
    .pipe(gulpInject(gulp.src(bowerFiles(), {read: false}).pipe(gulpFilter(ie8Files)),
                    {starttag: '<!--[if lt IE 9]>', endtag: '<![endif]-->'}))
    .pipe(gulp.dest('dist'));
});

这导致（例如）：

<!--[if lt IE 9]>
<script src="bower_components/json3/json3.js"></script>
<script src="bower_components/shim/es5shim.js"></script>
<![endif]-->
<!-- inject:js -->
<script src="bower_components/jquery/jquery.js"></script>
<!-- endinject -->