CODEWITHSUNDEEP
javascript
Pablo Estrada
Pablo Estrada

Reputation: 3462

Gulp task: get files with wiredep concatenate other js files and minify

I´m trying to build a gulp task that get all bower_components files with wiredep, then concatenates them together. Then concatenate some other JS files I have on a special folder an finally minify everything.

The problem is that I don´t know if I can specify wiredep another directory additional to the bower_components directory. If that´s not possible, is there any other solution I can use?

I´m a begginer using gulp, so any other error that you can point out in how I´m thinking my task would be highly appreciated.

var wiredep = require('wiredep')(
    {
      directory: 'static/bower_components', // default: '.bowerrc'.directory || bower_components
    }).stream;
gulp.task('scripts',function(){

    return gulp
        .src('index.html') //I don´t really know what to put in the src
        .pipe(wiredep())
        .pipe($.inject(gulp.src("More  JS files if wire dep can´t handle them")))
        .pipe(minify())
        .pipe(gulp.dest('static/dist/src/app.min.js'));
});

Upvotes: 0

Views: 210

Answers (1)

Tyler Russell
Tyler Russell

Reputation: 299

I would have a method like this (perhaps in a config file at the root of the project) to get whatever you wanted wired in with wiredep:

getWiredepDefaultOptions: function() {
    var options = {
      directory: bower.directory,//file path to /bower_components/
    };
    return options;
},

Then in your gulp task, have something like this:

gulp.task('wiredep', function() {
  log('Wiring the bower dependencies into the html');

  var wiredep = require('wiredep').stream;
  var options = config.getWiredepDefaultOptions();

  return gulp
    .src('./index.html')
    .pipe(wiredep(options))
    .pipe(gulp.dest("wherever you want your index.html"));
});

Depending on what other things you want to wire in, you would have to add an ordering of some kind using tags within the index.html.

Upvotes: 1

Related Questions