Blank new web project using Grunt
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev
.gitattributes
.gitignore
Gruntfile.js
LICENSE
README.md
package.json

README.md

New projects using Grunt 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. Check Gruntfile.js and look at //Change comments (settings at the top)
  6. Run grunt to start developing

Organisation

  • 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/libs: Contains all vendor files -> main.js
    • JS/main: Contains all custom files -> main.js
  • 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 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

Requirements/used

  • jQuery
  • SASS for css
  • Jade for html
  • Grunt
  • Modernizr for that one browser that we all know
  • Google Analytics for juicy stats

Browser compatibility

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