Concat and SASS
In this video we are continuing on with our journey into Gulp, the awesome task runner that turns all our front end development chores into a one click wonder.
As we've already seen how the fundamentals of a Gulp task are created, in this video we build upon that knowledge by expanding our existing CSS pipe line, adding in a step to combine (or concatinate) all our many .css files into one single .css file.
There are multiple benefits for doing this.
Firstly, visitors to our web site no longer need to download many separate files. This speeds up the end user experience, which is good for both your visitors and Google with its pesky, ever changing and hard to please search ranking algorithm.
Secondly, as developers we don't lose any flexibility. We aren't having to switch to using one single monolithic CSS file or anything crazy like that. Far from it, in fact.
And thirdly, we can continue to keep our development files full of useful comments, but the end user will never see them - again helping with keeping that final file size to an absolute minimum.
There are other steps we can add into our Gulp tasks. I fully encourage you to take a look at the official Gulp plugins repository, and / or Google searching for 'best Gulp plugins' and what have you, because you will find handily curated lists like this that can narrow down the list of potential options.
Getting SASSy
Front end dev moves at a break neck pace, and it only seems to be getting faster.
CSS is a major pain in the backside as far as I'm concerned. Not so much writing CSS, but keeping your styles organised, modular, and avoiding duplication of effort is a real chore. This isn't helped by the fact that you can't use or extract common properties (background colours, font sizes, etc) into variables.
Enter SASS.
SASS describes itself as CSS with superpowers. I don't proclaim to be any sort of SASS whizz, but I do use it in all my projects now and I can tell you that in my experience, it really whoops CSS's ass (thanks for the paraphrased catchphrase, Winamp!)
At a very high level, SASS will allow you to use variables, nested elements, maths operators (e.g. font-size * 1.2 or similar), imports, and much more. Check out the very useful documentation for all the details.
What I really like about SASS is that it's very easy to get going.
Sort of.
It is actually not that easy to use - IF you don't use a tool like Gulp.
With Gulp, it's a synch.
With very little effort (copying and pasting from the docs) you can bring SASS into your project and immediately start benefiting.
Combine this with everything we have learned so far and I'm sure you will be amazed at how quickly you feel like your front end dev skills have come in a very short amount of time.
That's how I felt. I hope you do too.
