Frontend Build Tools

In the later versions of Magento 1, they kindly bundled in a new default theme known as rwd which stands for responsive web design. This theme uses SCSS (a flavour of SASS), to make it easier to develop the theme with.

Prerequisites

You will need both NodeJS and NPM to work efficiently with the frontend build tools

Framework Setup

Place the following two gist files in the root of your project, not in the public directory. https://gist.github.com/edmondscommerce/e16a8e9f949a360af22343285b38ac73

Install Dependencies

Run npm install from the same working directory you placed these files in to and wait for the dependencies to be installed.

Note

Ensure you git ignore the node_modules directory or Git will version your dependencies.

Install Gulp Globally

For Gulp to work correctly it needs to be accessible globally, to do this, run the following.

sudo npm install -g gulp

Add the Compass Library

As we are not using Compass itself, we will likely need to include Compass as a SCSS dependency. The files are installed using NPM for convenience.

The files are imported in rwd in/around skin/frontend/rwd/default/scss/_framework.scss:34

You will need to copy the files in node_modules/compass-sass-mixins/lib to the rwd directory and edit the framework file's compass references accordingly. It will be useful to store your compass lib files in a compass subdirectory.

Configuration

All configuration options are at the top of the file.

themeDir - The absolute theme path E.g. /var/www/vhosts/project_name/public/skin/frontend/rwd/default

watchFiles - Where to watch for CSS changes (absolute path for Browsersync) E.g. /var/www/vhosts/project_name/public/skin/frontend/rwd/default/css/**/*.css

proxy - For Browsersync to be able to load Magento, if not set correctly Magento will redirect you to the base URL E.g. https://www.staging.myclient.desktop.com/

src - Should not need changing, specify where SCSS and CSS folders are in your theme

Browsersync

If you work inside a VM or LXC container you will need to add your hostname entry, much like you would on your host machine. As Browsersync is inside the container it will need this entry to correctly proxy through as well.

Available Commands

Once you are finished, the following commands are available.

default Launches Browsersync, just run gulp with no arguments

serve Same as default

sass Run a SASS compile with no browsersync