From Bower to Gulp

gulp.md

Moving from Bower to Gulp

For a while now we have used Bower to manage frontend dependencies. We'd use bower to install dependencies into a folder called thirdparty. Although there was nothing wrong with this approach it did mean we were limited to what Bower itself could do...

Introducing... Gulp

Gulp is a tool to automate your build process. It has a heap of features but to start with we'll keep it simple.

The new approach requires a couple more tools to use along side Gulp including:

• NPM / NodeJS - Node package manager
  • Almost any package that was in the Bower library can be found on NPM.
  • I'm sure we've all used NPM before, to install a package you can simply go npm install package-name --save-dev
  • All packages will be stored in a folder called node_modules
• Elixir
  • This tool was originally developed for Laravel to simplify Gulp tasks into a nice human format. Thankfully it has been separated out so that you don't need Laravel.
  • It has a few built in tasks that let you automate your build. 99% of the time we wont need to customise this build script (gulp.js)
  • Elixir has built in pre-processors for Sass and we can also use a built in Javascript bundler.

Whats changed?

• Compiling sass + javascript will be done together now via a command line prompt gulp This will run our gulp.js file which has the elixir build ready to go.
  • It has all the handy features like watching for changes to any scss or js file via gulp watch
  • It also has an option to compress even further before deploying. This compresses javascript A LOT more as well as CSS. This can be done like so gulp --production or gulp watch --production
• SilverStripe will no longer compile our javascript when live. We'll tell SilverStripe to include app.js and that is all. All other scripts will be bundled into that 1 file via gulp+elixir+webpack.
• No more thirdparty folder this will now be node_modules.
• Composer will no longer trigger a bower install. When we deploy our code now all CSS and Javascript will be pre compiled.

What to learn?

Most of these tools and approaches you would already be familiar with. The biggest change I see is how we now handle Javascript and using seperate plugins/modules.

Since we will now have 1 master app.js file and this will be compiled via Gulp not SilverStripe it means we need to import plugins/modules into the 1 file. There are multiple ways to do this but the easiest is using the require feature.

For example if you wanted to import Foundation (or bootstrap if your that way inclined) you would need to do the following.

// Require Foundation
require('foundation-sites/dist/foundation.min.js');

Note - all paths are relative to the node_modules folder in the root directory.

Not all plugins/modules are built to work this way so there are a couple different ways to require them.

For example the jquery cycle2 module isn't build that way so to require it into app.js we have to define that it's a script like so:

// Require jQuery Cycle2
require('script!jquery-cycle-2/src/jquery.cycle.all.js');

Next steps

I've already created a branch on our installer that has everything setup ready to go. I highly recommend having a read through all those tools and just playing around with the different options.

---