Boilerplate with Node-Sass, Grunt, Bower, Browser-Sync etc.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
.bowerrc
.editorconfig
.gitignore
Gruntfile.js
README.md
bower.json
build.config.js
helpers.js
package.json

README.md

Kickster Built with Grunt

Kickster is a boilerplate for starting fast with the development and much helpers like node-sass, bower, browser-sync, node-server and so much more awesome stuff. Read the documentation to learn more about it.

Dependencies

  • Node
  • Grunt
  • Bower

Introduction

// Navigate to the folder for development
cd app/

// Install dependencies
npm install

// Install bower-packages
bower install

// Run the server
grunt server

For grunt we have two files which are important. The Gruntfile.js includes all tasks, which you can configurate. If you want to add some files or handle the paths to your files, than there is the ``build.config.js`. The advantage is to cut the task- and the path-handling in two sections.

Structure

|- app
  |- assets
  |- helpers
  |- partials
  |- templates
  |- views
  |- .bowerrc
  |- bower.json
  |- Gruntfile.js
  |- build.config.js
  |- package.json
|- build
|- dist
|- .gitignore
|- .editorconfig

Handling paths and tasks with Grunt

Specially Kickster has two files which are important for working with Grunt. The one is build.config.js. This file handle all the paths, variables and files, without configuration the tasks.

The other one is Gruntfile.js for handling the stuff with tasks - adding or deleting here tasks.

Tasks

A list of all the available tasks. Server-Task for compiling the files live, build for creating the stuff for development and dist-task to generate an offline-version with minified stuff.

// Server-Task
// Start the server for development-process
grunt server

// Build-Task
// Build your files in build-folder
grunt build

// Dist-Task
// Generates a offline-version with concated and minified files
grunt dist

Features

Browser-Sync Repository:

Sync all devices and browsers (viewport and events)

Sass (Repository):

Sass without Ruby as dependency, because Kickster use node-sass for faster compiling. Node is so much faster than Ruby.

Imagemin (Repository):

Minify all the images with grunt-contrib-imagemin

JSHint (Repository):

Lint files with grunt-contrib-jshint

Concat (Repository):

Concating files with grunt-contrib-concat

Watch with Livereload (Repository)::

Watching all files. If one file changed, then Livereload will refresh the browser for you.

Uglify (Repository):

Uglify your javascript with grunt-contrib-uglify

Static-Server (Repository):

Run a server for generating your files with grunt-contrib-connect

Static-Generator (Repository):

Generates static html-files with grunt-generator

Handlebars Website:

Template-Engine is Handlebars to get some more flexibility and easier handling for pages / templates

Future-Stuff

  • Kickster as a Yeoman-Generator

License

Licensed under the MIT license.