CODEWITHSUNDEEP
javascriptdependenciesgulp
Praveen Puglia
Praveen Puglia

Reputation: 5631

Gulp - Managing library dependencies

I am working on a project where I have a vendor directory containing quite a few libraries and then all the app specific sources in app/js directory. I want to use gulp to minify everything in a single file maintaining the dependencies. I can't find a proper way to do so.

Example - Both jQuery UI and Bootstrap requires jQuery to be loaded before them. How do I specify this in my gulp task?

One way I know of is to pass the gulp.src() method an array of paths and it will emit the files in that particular order but it seems very unnatural to me. 

var paths = ['vendor/jquery.min.js', 'vendor/jquery-ui.min.js', 'vendor/bootstrap.min.js']
gulp.task('scripts', function(){
    gulp.src(paths)
        .pipe(concat('all.min.js'))
        ...
        ...
        .pipe(gulp.dest('build/js/all.min.js'))

})

For a large number of libraries, it doesn't seem right to include path to specific files that way and pass it to .src() method. How can I manage it better? Can bower be used in some way?

Upvotes: 0

Views: 2359

Answers (1)

Jakub Juszczak
Jakub Juszczak

Reputation: 7827

Well like you said, the easiest way is to add them to an array and gulp.src

gulp.src([
    'public/assets/vendor/jquery/dist/jquery.js',
    'public/assets/vendor/bootstrap/dist/js/bootstrap.js',
    'public/assets/js/my_scripts.js'
    ])

So you can just add the path of new js files you want to include.

Another possibility is https://github.com/austinpray/asset-builder

here is an example gulpfile with asset-builder https://github.com/roots/sage/blob/master/gulpfile.js

Another possibility is to auto-bundle the files from your bower file. https://truongtx.me/2014/07/18/using-bower-with-gulp/

Upvotes: 2

Related Questions