How to add specific bower components as IE8 conditional block in Gulp

安稳与你 提交于 2019-12-10 15:05:43

问题


I have several bower components, of which I need some components like json3, respondjs, es5shim to be added in an IE8 conditional block (in build as well as serve) like this :

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

How should I proceed to write the task? I could not find any suitable examples with gulp-inject as well as wiredep for this issue. Please advise


回答1:


It is possible with gulp-filter and gulp-inject's starttag option.

Suppose you have the following injections defined in index.html:

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

You can wire them in 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'));
});

Which results in (for example):

<!--[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 -->


来源:https://stackoverflow.com/questions/27794237/how-to-add-specific-bower-components-as-ie8-conditional-block-in-gulp

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!