Menu
Every time I install any dependency using bower is including all my dependencies into my index.html this is perfect!
The problem:
It's returning all my files separately causing to many unnecesary HTTP calls. I need to concatenate all my bower dependencies into one file, so I can eventually minify it and apply HTTP compression.
any ideas?
var options = {
bowerJson: config.bower.bowerJson,
directory: config.bower.directory,
ignorePath: config.bower.ingnorePath
};
gulp.task('wiredep', function () {
'use strict';
log('Injectin Bower components into the Layout page');
var options = config.getWiredConfiguration();
var wiredep = require('wiredep').stream;
return gulp
.src(config.layout + 'index.cshtml')
.pipe(wiredep(options))
.pipe($.inject(gulp.src('js/layout/layout.js')))
.pipe(gulp.dest(config.layout));
});
559
It's a quite old question, but I have a solution which works for me and should work for the others.
Firstly, we have to understand how wiredep works. It's not as obvious as I thought before, because wiredep by default operates on a file to which you are injecting. A typical implementation is as follows:
var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
gulp.src('./src/footer.html')
.pipe(wiredep({
ignorePath: '../'
}))
.pipe(gulp.dest('./dest'));
});
Take a look at the require part, where the stream function is assigned to a wiredep variable. Since this moment, you are using only the stream function which in fact does not return a stream of bower components as you may thought. wiredep now operates on a file passed to pipe, which in the above example is footer.html and the output of the pipe will still be footer.html, but modified by wiredep. That's why you end up with all.js containing an index.cshtml. It is a pipe chaine like below:
bower_components
|
V
"src/footer.html" ===> wiredep.stream() ===> gulp.dest() ===> "dest/footer.html"
At this point, we should ask two questions: how to obtain a list of files which wiredep uses and how to use them. Thankfully, there are answers to them.
It's a rather simple task. Firstly, modify the require function call to include the whole library: var wiredep = require('wiredep');. Since then, you can use two additional fields provided by wiredep: wiredep().js - get JS files from bower_components, wiredep().css get CSS files from bower_components.
To finish this task, I use gulp-inject which is perfect for this kind of jobs, and of course gulp-concat. If you don't have then, just install them by NPM (npm install --save-dev gulp-inject gulp-concat) and add a dependency to your gulpfile.
If your example index.html looks as follows:
<html>
<head>
<title>Hello World!</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
Hello World!
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
Your gulpfile will look something like this:
var gulp = require('gulp');
var inject = require('gulp-inject');
var concat = require('gulp-concat');
var wiredep = require('wiredep');
gulp.task('bower', injectBower);
function injectBower() {
var target = gulp.src('./html/index.html');
var js = gulp.src(wiredep().js);
var css = gulp.src(wiredep().css);
return target
.pipe(inject(js.pipe(concat('bower.js')).pipe(gulp.dest('./scripts'))))
.pipe(inject(css.pipe(concat('bower.css')).pipe(gulp.dest('./styles'))))
.pipe(gulp.dest('./html'));
}
And now, after you run gulp bower, your index.html should look like this:
<html>
<head>
<title>Hello World!</title>
<!-- inject:css -->
<link rel="stylesheet" href="styles/bower.css"/>
<!-- endinject -->
</head>
<body>
Hello World!
<!-- inject:js -->
<script src="scripts/bower.js"></script>
<!-- endinject -->
</body>
</html>
Gulp will create the concatenated JS file in the scripts directory and the concatenated CSS file in the styles directory. You can freely customize this process; for more information, visit the gulp-inject page. gulp-inject is quite flexible tool, thus you should be able to achieve expected results. In my case, I have also gulp-uglify and gulp-rev appended when building the production environment.
If you have any questions, just ask.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
