There are a handful of tools we use on our local development environment to process and build the front-end of our codebase. To start front-end development on the codebase you'll need the following tools installed:
- NPM
- Grunt
- Bower
- Ruby and Ruby Gems
- Compass
More information about these tools are listed below.
NPM helps us manage various Node (javascript) libraries we use to performs various tasks while we are writing code. After you have NPM installed, you can install Bower and Grunt, two Node libraries we use specifically.
To install NPM, download and install from here: https://nodejs.org/download/
Grunt library that serves as a task runner used for automating tasks during a build process. We use grunt to compile our SASS, minifiy our javascript, and do other things to the codebase while we are working. These build processes are configured to run as you are editing and saving files.
To install Grunt, follow these steps: http://gruntjs.com/getting-started
Bower is a package manager for client-side Javascript files. Instead of downloading each javascript file we usually and manually including them into our site, we use Bower to download these libraries for us. After downloading, Grunt automatically compiles the downloaded library into our main javascript file.
To install Bower, follow these steps: http://bower.io/
Compass is the SASS preprocessor we use to compile our SASS into CSS. Grunt, our task manager detailed above, is configured to use compass, and automatically compiles the sass into css using compass.
To install Compass, follow these steps: http://compass-style.org/install/
After these tools are installed, you'll want to prep for machine for development, by downloading the various clien-side libraries we're using for Grunt and Bower. To do that, there are a few commands used to prep each of the tools above.
- Install required NPM packages.
$ npm install
- Download Bower libraries
$ bower install
As mentioned above, when you're updating SASS and JS file, you'll want Grunt to be watching for these updates, and when it notices the updates, to compile the files. To start "watching" your files run:
$ grunt watch
You'll see your terminal start doing some magic, and see your files compiling as you save.
When you commit your code using Git, git hooks are setup to compile and minify your javascript, so that code run in production is optimized. You may see this happening after you commit. Don't worry it's normal.
Before you begin tweaking Craft, please give the documentaion a thourough review. It can be found here: https://buildwithcraft.com/docs/introduction.
Also, there is a great Craft compansion website called Stright Up Craft (http://straightupcraft.com/), that has a handful of tutorials about the platform, plus cheat sheets and a plugin listing, for ways you can enhance Craft.
To acess the CMS, visit smartzip.com/admin
- Username: admin
- Password: makeg00dthings