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.
You will need both NodeJS and NPM to work efficiently with the frontend build tools
Place the following two gist files in the root of your project, not in the public directory. https://gist.github.com/edmondscommerce/e16a8e9f949a360af22343285b38ac73
npm install from the same working directory you placed these files in to and wait for the dependencies to be installed.
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
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.
All configuration options are at the top of the file.
themeDir - The absolute theme path
watchFiles - Where to watch for CSS changes (absolute path for Browsersync)
proxy - For Browsersync to be able to load Magento, if not set correctly Magento will redirect you to the base URL
src - Should not need changing, specify where SCSS and CSS folders are in your theme
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.
Once you are finished, the following commands are available.
Launches Browsersync, just run
gulp with no arguments
Run a SASS compile with no browsersync