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 pression.
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 ponents 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));
});
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 pression.
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 ponents 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));
});
2 Answers
Reset to default 10It'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 ponents 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_ponents
|
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.
How to obtain a list of files
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_ponents, wiredep().css get CSS files from bower_ponents.
How to use them
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.
Sounds like you need gulp concat
This will be the next step in your gulpfile.js
var options = {
bowerJson: config.bower.bowerJson,
directory: config.bower.directory,
ignorePath: config.bower.ingnorePath
};
gulp.task('wiredep', function () {
'use strict';
log('Injectin Bower ponents 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(concat('all.js'))
.pipe(gulp.dest(config.layout));
});
Or maybe a seperate scripts task:
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});