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

Question

I have several bower components, of which I need some components, such as json3 , respondjs , es5shim , which should be added in the IE8 conditional block (both in the assembly and in the service), for example:

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

How do I get to writing a task? I could not find suitable examples with gulp-inject , as well as wiredep for this problem. Please inform

Answer 1

Perhaps with gulp-filter and gulp -inject starttag .

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

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

You can link 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')); }); 

As a result (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 -->