Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Package JSON and Dependencies
Lab: Part 3a – Automating Tasks with Gulp
Video Runtime: 07:50
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.
Need Node.js, npm, and/or gulp?
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 you can add in your name and GPL for the license.
Next you need to install gulp locally. Type: npm install gulp --save-dev
. Then go get something to drink or mess around on Twitter as it installs. When it’s done, then you need to install the following:
- Sass by typing:
npm install gulp-sass --save-dev
- Bourbon by typing:
https://www.npmjs.com/package/node-bourbon
- Neat by typing:
https://www.npmjs.com/package/node-neat
You now have the base node modules that you need to convert Sass over to native CSS. There will be more modules that you’ll install. But this will get you started.
Master Tip
A shortcut is to create the package.json
with all of the dependencies first. Then run npm install
It will then install all of the node modules. That saves you time when you clone this starter theme for new projects.
You will grow in this profession when you incrementally and systematically stretch yourself....bit-by-bit.
Episodes
Total Lab Runtime: 00:48:15
- 1 The Why of a Task Runnerfree 07:39
- 2 Package JSON and Dependenciespro 07:50
- 3 First Gulp Taskpro 09:55
- 4 Running Sass Task & Fixing Errorspro 10:17
- 5 Sass Pixel to Rempro 08:27
- 6 Gulp Watchpro 04:07