Skip to content

Latest commit

 

History

History
executable file
·
153 lines (105 loc) · 6.68 KB

README.md

File metadata and controls

executable file
·
153 lines (105 loc) · 6.68 KB
Raw

START

HTML5 starter kit for creating HTML5 applications and User Interfaces (UIs), intergrated with GRUNTJS for fast, clean and optimised web app creation.

Prefer GULP: We've got you covered here.

It has all the neccessary requirements to get anyone started in creating apps fast and easy.

To see the layout structure of the boilerplate, see Structure.md

What does it do for me?

START basically does the following:

  1. compiles your scripts, templates, styles (both transpilation and precompilation is taken care of here)
  2. lints them (checks for any syntax error)
  3. notifies you about errors via console and system notifications
  4. wraps the scripts and templates in common.js / AMD modules. (for build systems)
  5. concatenates scripts and styles
  6. generates source maps for concatenated files
  7. copies assets and static files the respective required project production directory
  8. shrinks the output by minifying code and optimizing images
  9. monitors/watches your files for changes and updates realtime wherever relevant, reloads to reflects the changes to the browser
  10. create a test and distribution/final versions of your app or UI without compromising the original code

Concatinates all CSS into app.full.css and JS into app.full.js or app.full.min.js after minification. And replacing all CSS and JS tags in your html file with one tag having the stated as thier sources. In DISTRIBUTION version only though.

Dependencies

You will need to install some stuff, if you haven't already:

Majors:

Secondaries(click for further information):

  • npm (installed together with node.js, usually bundled in it)
  • gruntjs (part of the instructions below)
  • bower

Getting Started

Once you have NodeJS installed, run_(type/copy paste int the command line window and press ENTER)_:

To download the boilerplate

$ git clone https://github.com/kn9ts/start-to-grunt name_of_your_project

After cloning/copying the boilerplate, please get into your project's directory/folder

$ cd name_of_your_project

To install Grunt-CLI (Command Line) plugin/tool

$ sudo npm install -g grunt-cli

To install grunt/project dependecies

$ npm install

To install default project front-end assets/libraries eg. bootstrap, jQuery... NOTE: This downloads CSS and JavaScript libraries that usually default in most projects nowdays. They are downloaded into the bower_assets folder that can be referenced in the HTML you are editting as you would have with any CSS and JavaScript files in your project, only that this way we give your application a good structure and files seperation.

$ bower install

Note: Each of the '$' (dollar) sign denotes a step (so steps 4 in total)

Note: You can skip STEP 2($ sudo npm install -g grunt-cli) if you already did install the grunt command line plugin/tool in any prior project with or without any relation to this boilerplate

This will install all the things you need for running the grunt-tasks automatically.

Note: As stated prior. You need to have a running node.js and ruby along with npm. Please install this before setting up START in your project's directory. Ruby comes default in most systems nowdays so I believe you do have that already.

Finally Build and launch

Now you can start developing your site. Therefore use the GruntJS defualt task (type in your Terminal and press ENTER):

$ grunt

This will create a test and dist folder with a test and distribution application version in their respective folders.

Live Reload – Take Productivity to the Next Level

Read Article To learn more about Live-Reload

One of the features of the GruntJS watch plugin is that it can automatically reload changes. It is very helpful if we are making markup, style and javascript changes and want to get instant feedback without pressing the browser refresh button.

To create a test and view the test version which is a compiled and cleaned up developement version of the project. So run:

$ grunt serve

And for the production/distribution version run (with no live-reload) since it reflects the final version of your UI/Web application:

$ grunt serve:dist

Note: Grunt watch will monitor any kind of changes made to the project and reflect it immediately to the browser. No need to hit refresh button anymore. The distributed version is not tied to live reload since it is emulating the final version of the product as it would have displayed on user's which does not require any live reload. When developing thus testing use the default -- grunt serve

Yes! Just with boring old HTML (duuuuh!)

Yes, you can use the normal/old html way of writing markup. Just rename 'file_name' variable on line 63 to the name of the file you are working on. Do not add html or any extension tag whatsoever.

62.               file_name: 'myfilename', //eg for myfilename.html

Though you could have the new girl in town: Jade Support

But you should STOP WRITTING TIRESOME HTML. You do get tired opening and closing tags, dont you?! Jade fastens front-end developement by at least 5 times. Try Jade today.

It is supported off the box. No need to configure anything. Start writing JADE today. Chuck your phone and come with up a 'am leaving you' message for HTML.

Browser support

  • Chrome
  • Firefox 4+
  • Internet Explorer 8+
  • Opera 12+
  • Safari 5+

Cordova applications

It's also awesome for cordova applications:

  • replace the www folder content with this
  • and uncomment the 1st script..
// App's dependencies(libraries) and business logics
application-engine(description="all the application's JS files fall here")
	//- Base engine, for Phonegap app, uncomment this if you are using phonegap
	//- script(type="text/javascript" src="cordova.js")

NOTE: do not delete or replace the config.xml file in the www folder that was generated by cordova create command

Requires cordova/phonegap v3.3 and above using the new CLI method for development and plugin loading

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

Version: 1.2.0

License

Copyright (c) 2014 Eugene Mutai Licensed under the MIT license