Getting Started with Gulp
In this first video we are going to take an introductory look at Gulp.
We start by installing Gulp, and rather than repeat the instructions for doing so, I would advise just checking out the official docs.
There's something to install - namely, Node JS.
Now, Node JS is scary sounding. It reminds me of the Borg from Star Trek. Don't ask me why, but it does.
Thankfully though, you don't actually need to know anything about Node to use Gulp. I would advise looking into Node though, as not only is it super powerful and highly useful, it's also gaining a lot of traction in business and is a skill that is definitely worth having in your arsenal.
Why Use Gulp?
There are many tasks that we, as diligent worker bees, must complete as part of our development process.
Some tasks - coming up with a design, writing the business logic, adding some tests - are one time affairs. We can't automate these things, we must do them from scratch, and there's no real repetitive parts to each task.
Other tasks - running the tests we write each time we make a change, minifying our JS and CSS files, compiling SASS to css, combining all our CSS files into one file, etc - are perfect for automating. The last thing we want to be doing is doing and re-doing those tasks every single time we make a change.
Good Lord no.
Instead, we can set up a tool like Gulp or Grunt to 'watch' our files for us, and to carry out these tedious tasks every single time we make a change.
Why Not Use Assetic?
Assetic comes with Symfony.
The docs tell us all about how to use Assetic for managing our assets (read: JavaScript and CSS files).
Assetic was a great solution back when it was released and it definitely does a great job of doing what it's designed to do.
But it is, for all intents and purposes, Symfony specific. You won't find front end devs (aside from ones who have worked on Symfony projects) who know much if anything about it.
The front end community is moving at break neck pace. They have solved this problem in a way that is better suited to the realities of modern front end development. Whether you prefer Grunt or Gulp is personal opinion, but both provide a stronger argument for usage than Assetic.
I don't want to sound like I'm ragging on Assetic.
It's good, but Gulp is great.
Example Task - Minifying our CSS file
Enough with the jibber jabber, let's get on to the code.
You will need to have installed Gulp and Gulp Minify CSS for this to work.
If you haven't already, go ahead and create yourself a gulpfile.js, and also make sure you have a .css file to minify. If you don't have one to hand, feel free to use the one I used.
// project_root/gulpfile.js
var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');
gulp.task('minify-css', function() {
return gulp.src('*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dist'));
});This assumes that your stylesheet also lives in your project root. If it doesn't, make sure you update the path to where your CSS file lives.
The idea here is that we take anything matching the file extension of .css, running each match through the minifier, and then the result of that is sent to a dist directory.
Pipes are really about chaining together small, each to understand blocks of code, and combining them to make something more powerful. I like to think about it like how the six Constructicons combine to form Devastator. I guess that's an insight into how my mind works :)
