Gulp & Sass Setup

Overview

Team GoTo uses Gulp to get Sass and other NPM plugins that improves our front end workflow.

Following setup instructions is general and may differ slightly for some of our projects. 

See project’s gulpfile.js instructions if you encounter any issues during setup.

Instructions

Install Node and Gulp

  1. Download and install Node.js from http://nodejs.org to get NPM (if you don’t already have it). 
  2. Install Gulp globally:

npm install -g gulp

Note: Make sure that /usr/local/bin is in your $PATH by following command: echo $PATH

Install plugins

  1. Go to current projects _build folder, e.g. skin/frontend/carbon/[theme_name]/_build/
  2. Install and/or update plugins listed in package.json file:

npm update

Use Sass

  1. Go to current project’s build folder, e.g. skin/frontend/carbon/[theme_name]/_build/
  2. Start using Sass:

gulp (alt. gulp watch)

Note: Make sure to add both the Sass file and the compiled CSS file to the theme’s repository

Use Browser Sync (and Live Reload)

  1. Server settings:
    1. Open MAMP Main Window
    2. Go to tab Hosts
    3. Create new host
      1. Server name: <project_name>.dev
      2. Document root: Sites/<project_name>/htdocs
  2. Database settings:
    1. Open Sequal Pro
    2. Choose <project_name> database
    3. Change paths in table core_config_data
      1. web/unsecure/base_url = http://<project_name>.dev/
      2. web/secure/base_url = http://<project_name>.dev/
  3. Start browser sync (and watching Sass files):

gulp browser (alt. gulp sass-sync)

Useful Links

https://www.npmjs.com/

http://travismaynard.com/writing/getting-started-with-gulp

https://github.com/Pestov/essential-gulp-plugins

http://www.sitepoint.com/architecture-sass-project/

http://www.browsersync.io/docs/gulp/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s