Whoops, I had you install the wrong Bourbon and Neat node modules. Oh poo. No worries this gives us an opportunity to try out the shortcut I shared with you in the previous episode. You will use this shortcut on every project as you copy/clone your starter theme. Also, we will begin fixing any typos and errors. When you run gulp, it will tell you where there are problems. I gave you a few errors, but we’ll correct each of them in this episode.
Let’s write the first gulp task in gulpfile.js.
The first step is to make sure you have gulp installed globally. You need to have both node and npm installed. Then do the following: Open terminal. Type: npm install gulp –g When it’s done installing, type: gulp -v If you get a version number, you are ready to rock and roll. Next let’s create the package.json boilerplate file. To do that, let’s run the init out of npm which will walk you through the options: npm init Just keep pressing the return (enter) key on your keyboard to select the defaults. When done, then open up the file. Now […]
A task runner does much more than just compile Sass into native CSS. In this video, you will learn about the why of using a task runner, like gulp, to automate redundant tasks. It will improve your productivity. There are plenty of plugins available that you install as a node module which do tasks such as: Sass prefixing, gathering up media queries, error checking, and minifying Load Bourbon and Neat (and others) as a node module instead of using Bower Converting scripts into one minified file plus error checking Optimize images, SVG, and sprites Run translations and more
It’s time to do more with gulp. While gulp is awesome at processing Sass, you can do more tasks such as sourcemaps, minifying, error handling, notifications, linting (error checking), and even more time-saving shortcut modules within Sass itself. Let’s finish up your gulp setup file and get you cranking out CSS in less time. Let’s do more.
Sass requires compilation to convert it into native CSS. You use a task runner, such as Grunt or Gulp, to automate the task for you. In this lab, you will learn about and build your task runner using Gulp.