CODEWITHSUNDEEP
phpgruntjscomposer-phpbowergulp
thatguy
thatguy

Reputation: 837

How do you use a build system like gulp.js with dependency managers like bower

After years of being poor - mediocre PHP developer, I decided to up my game and learn a little more about modern workflows and best practice for developing web apps.

I've studied up on task runners, dependency managers, git, and cloud servers. I'm working on a PC predominantly and I've decided to settle with

I used some of the answers on here to work out how to change the location bower, for example, places the files it downloads but I'm struggling to understand what the best practice is when you use a dependency manager (that seems to download a whole git repo) and a task runner.

For example I can tell bower to download jquery or bootstrap into the src/vendor folder but what gets downloaded is a mix of javascript, css and other files. I could leave them there and reference them in my code but then running a gulp process would involve cherry picking individual files and minimizing or concatenating one by one, avoiding all the other stuff in the folder that I don't need.

Is this best practice for handling this or am I in the wrong ball park. Should I even be using a task runner with a dependency manager?

Upvotes: 2

Views: 1287

Answers (2)

robertmain
robertmain

Reputation: 419

Okay, first off the bat - let's talk about composer and bower. It's not really a one or the other kind of thing - it's more that you would use them both together. You would use composer to manage your PHP dependencies(for example Guzzle HTTP Client) and bower to manage your client side dependencies such as jQuerybootstrap,a sass mixin library like bourbon or maybe something like Font Awesome

As far as bower dependencies and pulling those in are concerned, one way would be to use Gulp in conjunction with with Main Bower Files. This reads your bower.json file and pulls bower dependencies into your script based on that. If some bower dependencies don't have a main attribute in bower.json(and some don't) then bower-main-files won't pick them up by default...However - you can work round this by providing overrides in your own bower.json file for that like this:

{
  "name": "My Project",
  "version": "1.0.0",
  "dependencies": {
    "autogrow": "https://github.com/ultimatedelman/autogrow.git#master",
    "jquery": "1.12.2",
    "jquery-slimscroll": "^1.3.7"
  },
  "overrides": {
    "jquery-slimscroll": {
      "main": [
        "./jquery.slimscroll.js"
      ]
    }
  }
}

As you may have noticed you can also point bower at a github repo and branch too.

You can then use the actual main-bower-files package itself in your gulp tasks like so:

var gulp = require("gulp"),
    reload = require("browser-sync").reload,
    mainBowerFiles = require("main-bower-files")
    $ = require("gulp-load-plugins")({
        camelize: true
    });
gulp.task("vendorScripts", function() {
    return gulp.src(mainBowerFiles({filter: '*.js'}))
        .pipe($.plumber({
            errorHandler: c.onError
        }))
        .pipe($.concat(c.concatVendorCSSFile))
        .pipe(gulp.dest('assets/styles'))
        .pipe(reload({stream: true, once: true}))
        .pipe($.size({title: "vendorScripts"}));
});

If you're interested, I have a full project with all this setup here

Upvotes: 1

Daryll Doyle
Daryll Doyle

Reputation: 453

Look at globbing in Gulp. You should be able to pick out your CSS and JS by using gulp.src('src/vendor/**/*.css') and gulp.src('src/vendor/**/*.js') respectively.

Alternatively, a quick search of NPM returns this which could be of some use: https://www.npmjs.org/package/gulp-bower-files/

Upvotes: 1

Related Questions