Gulp & Bower. Introduction

Automate! don't get angry

Gulp, Bower and Angular JS


Creating a web application nowadays is complicated. If you are an web developer I'm sure you know about frameworks, maybe you are a Ruby On Rails lover, maybe you are a Java guy or a .NET developer or maybe you are (dinosaur?, I don't agree) a PHP developer, as I am. Either way, you are probably using some MVC-like framework which helps you to deal with a database using an ORM (Eloquent, ActiveRecord, Hibernate,...), routing, requests, responses, views and lots of other cool features. That's great.

Just as an example I'm using Laravel and Slim Framework and some time ago I used Yii, CakePHP and CodeIgniter. Of course I use Git to manage my source code repositories and Composer as a dependency manager in PHP. Great stuff! I didn't say but (TOP SECRET) I've never really liked front-end, you know, HTML, CSS, JS...

Why did I hate frontend? and why I'm starting to love it?


Well, I have to recognize that front-end development has always had a creative part where I've never fitted well, but also, I wasn't a good HTML+CSS+JS developer. Much of my CSS was tricky and I always had the feeling that my CSS was really bad, repetitive and not clear, same for JS. At some point HTML5, CSS3, and, specially, Bootstrap and Jquery become my good friends.

Even though, some pieces of the puzzle were missing. For example: coding JS along multiple files, the minifying process hell when going to production, ...or... downloading third-party libraries and maintaining versions... using SASS (which is a must in my opinion) and compiling to CSS... Crazy, huh? Too much manual, boring and annoying things to do (and chances to make a misktake).

Please, wait, don't close that window! I'll stop complaining I swear.

Bower. What is it? What is used for?


Bower is a package manager (Bower requires NodeJS it is installed via npm). Similar to Composer you basically specify which packages (and versions) you need in "bower.json" file then bower will fetch them remotely and install to a project folder "bower_components" just runing:

bower install

Some good tips here: you can gitignore the bower_componets folder, you don't really need to version those files. At some points you will copy some "dist" files to your public folder if your web app need them (for example: jquery.min.js or some fonts from bootstrap)

I'll write a specific Bower post soon to see it in action and talk about set up and particularities. By now just think that bower has a search utility that suggest you packages by name, and handles the bower.json file for you, you can tweak it manually too, though.

Gulp. The starred actor


Maybe you have listened about Grunt. Simillary to Grunt, Gulp is a BUILDER (Gulp is also a npm package, so go a install NodeJS). Gulp let's you automatize several stuff by creating tasks in a single file (gulpfile.js) and then just run:

gulp

Sit down and relax, gulp will compile your SASS, will concat and minify CSS and JS (or coffescript), will copy the minified assests form your private assets folder to the public folder in your application and even will maintain "revisions" of your assests or will run unit test. Just a dream, isn't?

Gulp post in a few days, I hope

Angular JS


Just a quick mention to this crazy good javascript framework. Will talk about it further but, can you imagine MVC stuff at JS level? unit tests? ajax restful stuff in 1 line... Sounds good!

I've just written a small project using gulp, bower and Angular JS, just download it, uncompress in a folder, and then in a terminal:

sudo npm install
bower install
gulp

Enjoy the magic!