Using Gulp

Taking the leap into SASS CSS management can be a bit daunting, particularly in a Windows environment, rather than Mac or Linux. This jump can happen one of two ways:

  1. Starting on your own, developing your own SASS files for a project.
  2. Jumping into the deep end updating CSS on an existing project through SASS.

I’m hopping in with option #2. Since many developers swim in a Mac or Linux world, the tools to manage these environs can feel a bit foreign on a Windows PC or the most common tools used by colleagues just aren’t available. So how do you go about it?

First, you may need an installation of Ruby to get things going. SASS is originally a Ruby application, so this may be necessary. Another option is to install node.js and go with more recent versions of SASS. Scout is a good, free option for SASS development.

So if you are clawing at this on your own, you can use the Scout app to start setting up SASS files and outputting your CSS. And for option #2? Gulp should be able to help you get into things mid-stream.

There are some great tutorials and guides on the web for using Gulp. Because of the many uses of Gulp, distilling it down to this one component can be challenging, but these guides should help out:

  • CSS-tricks gives a great overview of Gulp, what it does, how to start using it, and it’s place in a SASS toolkit.
  • Sitepoint also offers a great overview of Gulp, but it is a bit less specific for CSS work and gives a broader overview. That broader overview can also help understand the rest of what it does and how it fits into a web developer’s toolkit.

UPDATE: Important information for installing on Windows 10. This video is a God send to get Gulp up and running in a Windows environment. With a pre-existing Gulp package.json and gulpfile.js, use the following steps:

  1. Download file set from repository.
  2. Open Powershell terminal and node.js client (assuming node.js installed).
  3. cd to appropriate folder location with gulpfile.js and package.json.
  4. Command to start gulp: npm install gulp-cli -g
  5. Verify Gulp with command: gulp -v
  6. Install node-SASS: npm install node-sass -g
  7. Install Windows tools: npm install -g windows-build-tools
  8. Again run Gulp-SASS install: npm install gulp-sass –save-dev
  9. Run Gulp copmmands as specified in gulpfile.js! Hooray!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.