Entity view (Content)

Bower, Composer and Gulp - Match made in Heaven?

By cmcclure
May. 1, 2015

Being a backend Drupal specialist, I normally do not get too involved in the frontend side of things but being a well rounded technical resource I just cannot ignore tools which make life that much easier on projects. Three tools I am going to talk about briefly are:

Bower

Bower is targeted as being a frontend package manager much like Composer. The idea behind Bower is to allow for a much cleaner dependency management and update there of, of all dependencies required on your project.

In order to make use of Bower there are a few dependencies which need to be met on your local machine including Node and NPM and Git.

Once successfully installed on your local machine, packages can be installed with a simple bower install <package>. These packages are then stored in vendor/bower_components/ by default and you will need to copy them depending framework to relevant public src directory. This can be automated with the likes of Grunt, RequireJS etc.

Dependencies are managed within a bower.json file and resemble the composer.json file.

An example of a bower.json ( albeit simple )

{
  "name": "Awesome Application",
  "dependencies": {
      "font-awesome": "~4.2.0"
 }
}

So now instead of going off and and hunting down install or download, you can simply bower install or if you need to update versions of frontend components bower update.

This makes working with other developers and frontend resources easy as you can be sure you are all working with the same components in terms of frontend.

Composer

Composer is a dependency manager for PHP interested in managing libraries related to code level of your application. With composer dependencies are downloaded to the vendor/ directory within your application.

Composer does require PHP 5.3.2+ to run but benefits from being a multi-platform tool and makes use of Git, SVN or hg depending on how the package is version-controlled you are installing.

Like Bower above once installed you have many command which can be execute from command line to install, update and remove packages. All of which are stored in a composer.json file.

Composer also provides autoloading capabilities by generating an autoload.php file which can be included in your bootstrap process within application.

For me again, Composer has been invaluable in ensuring clients and other developers have a consistent set of components and versions thus reducing the classic "It works on my machine" comment.

Gulp

You have more than likely come across Grunt which is a Node.js based task runner. Well Gulp, is the new kid on the block and it is a task runner which uses Node.js.

So what are the key differences? The key differences in my opinion are streams, build file is code not config and tasks are executed with maximun concurrency. Finally with a set of only 5 tasks to learn it is certainly simplier and learning curve seems dramatically reduced compared with Grunt.

So what about Grunt? Gulp is certainly the new cool kid on the block but it does not mean jumping ship just yet. Grunt has a larger community around it however adoption of Gulp is progressing fast with the likes of Laravel 5 making using of bower and Gulp out of the box.

Finally

If all of the tools above are new ground for you then I certainly recommend taking a look at them and begining to introduce these into your next projects.

Post Tags: