This project is made up from several tools, connected together to provide automated frontend development environment. There are another approaches, such as Yeoman, which are based on very similar tools. However, my goal was to learn to use these libraries and get better understanding of the processes behind Yeoman and advanced toolkits. Once all the different parts are understood, it makes sense to move to using Yeoman or similar project.
- RequireJS for dependencies management and templates (functions) loading
- Backbone integration, using Zepto and lodash libraries
- on-the-fly compilation of Handlebars HTML templates into javascript functions
- on-the-fly jslinting of javascript files, triggered by file save operation
- Jasmine library for specs suite and continuous testing
- Jasmine-zepto extension for DOM testing
- RequireJS
- Zepto
- Lodash
- Backbone
- Handlebars
- Jasmine
- Jasmine-zepto
You need to have node and its npm installed (npm is usually a part of the node package).
For tasks management, grunt is used, along with its grunt-cli tool. Instructions on how to install could be found in Getting Started guide.
To install all required modules (listed in package.json), run
$ npm install
To operate with boilerplate and its tasks, you can use following commands:
$ grunt jasmine-generateto createspec-runner.htmlfile for executing Jasmine specs suite.$ grunt jasmine-runto prepare livereload and start up local server. If you have generatedspec-runner.html, you can open http://localhost:9000/spec-runner.html and the specs suite will be automatically run whenever you change any javascript file.$ gruntis the default task, which handles jslinting and HTML templates compilation into Handlebars functions. These happen on the fly, as you save javascript and html files.
Once the local server is run, it's also possible to access the application at http://localhost:9000/app/index.html
- on-the-fly SCSS -> CSS
- minification, concatenation
- images compression
- using production versions of libraries