For instance, instead of running
sass --watch in a shell to compile our Sass stylesheets, plus launching a local server with
python -m SimpleHTTPServer in another one, and manually open a browser to see our page, we can centralise all of this in a single task manager: Grunt.
Curious? Download this grunt demo project on Github. The folder structure is quite common: the
app directory contains stylesheets, HTML files, scripts, etc.; whereas the
test directory contains our specs for the app.
To try the demo, you need to install the Grunt client first (assuming you already have Node in your machine), then clone the repository and install its dependencies:
npm install -g grunt-cli git clone firstname.lastname@example.org:belen-albeza/grunt-demo.git cd grunt-demo npm install
Now you can run Grunt! This will make a development build of the app, launch a server and open a browser with the app loaded:
If you want to run the Jasmine specs in a browser window, just try:
Take a look a the
README.md file in the repo to see what tasks are included. You can tweak the tasks' configuration in the almighty
By the way, the source code of this demo project has been extracted from Power-Up Your Front-End Development With Grunt, my quick start guide to Grunt. You'll find it interesting if you want to understand the tasks configured in the