最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - concatenate all files returned by wiredep into one single file - Stack Overflow

programmeradmin8浏览0评论

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));
    });
Share Improve this question asked Nov 23, 2015 at 22:34 Leo JavierLeo Javier 1,40314 silver badges19 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 10

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 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/'));
});
发布评论

评论列表(0)

  1. 暂无评论