Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Working with Grunt and Bower v1.0

Set up

  1. Clone files to a new directory
  2. cd to the this directory via command line/terminal
  3. Run npm install to get your node_modules (default .gitignore)
  4. Run npm install grunt-postcss pixrem autoprefixer-core cssnano
  5. Run bower install
  6. Check Gruntfile.js and look at //Change comments (settings at the top)
  7. Run grunt to start developing


  • Dev: Add any and all development content here. Jade for html templates
    • Content:: All files and folders are copied from this location, from jade to html format, excluding files from the _template folder
    • CSS/modules: Contains all modular files -> main.scss
    • CSS/pages: Contains all files for custom/specific pages -> main.scss
    • CSS/template: Contains all basic template files -> main.scss
    • images: Contains all images. Using subfolder is allowed. Optimization will happen later
    • JS/main: Contains all custom files -> main.js
    • JS/analytics.js: In case you use Google Analytics
  • Build: All dev changes are tracked in the build folder. These files are compiled for web friendly viewing. This is the working test directory when running a local server.
  • Dist: All build files are compiled for final host purposes in the dist folder. These files (css, js, html & images) are optimized for the web (minified & concatenated)

When using dist to go live

  • Run grunt dist and upload everything in the dist folder to host via FTP.

To publish via FTP

  • Open/create .ftppass and edit/add any server with the specific name: ServerA (= the default server name). But don't forget that this file needs to be in the same location as your Gruntfile.js. You can choose a different name by changing it in the Gruntfile.js. Make sure it (.ftppass) remains in the .ignore for privacy reasons.
  • Run grunt ftp (make sure to test and backup remote files if needed first)
  • If creating an .ftppass file, you could use this code to set it up:
  "ServerA": {
    "username": "putyourownusernamehere",
    "password": "putyourpasswordhere"
  "anotherServerifYouNeedItButItsOptional": {
    "username": "putyourownusernamehere",
    "password": "putyourpasswordhere"

For more information


  • jQuery
  • SASS for css
  • Jade for html
  • Grunt
  • Bower
  • Google Analytics for juicy stats

Browser compatibility

  • Internet Explorer 9+
  • Firefox
  • Chrome
  • Opera
  • Safari


Blank new web project using Grunt and Bower




No releases published


No packages published