Notoriously Psychedelic Modules


    1.0.0 • Public • Published

    grunt-angular-boilerplate Build Status Coverage Status

    My boilerplate Angular.js application using Grunt.js as task runner.

    Front-End dependencies handled by Bower, unit tests run by Karma & Jasmine.


    npm install -g grunt-cli bower


    grunt serve

    Building for production

    grunt build

    Running tests

    grunt karma:unit

    Project structure

    Lets start, by introducing the folder structure of the project.

    We have few importants folder to mention, and they shouldnt be moved unless necessary (GruntJS tasks will fail):

    1. js - main javascript folder for all related javascript stuff
    • src - code written by developers, used by Grunt to process
    • build - code processed by GruntJS ( dont edit anything there !)
    1. libs - main folder for 3-party javascript libraries such as jQuery or Bootstrap, Angular etc
    2. views - place where all html tempalate files goes
    3. styles - place for styles
    • less - all less files that are going to be proccessed by GruntJS goes here
    • css - files created by GruntJS
    1. test - contains unit tests

    GruntJS tasks

    Now, lets go to GruntJS tasks.

    Right now we have one main grunt task that combines all the usefull tools to develop our application. When you type:

    grunt serve

    thats whats happening under the hood:

    1. Grunt calls Bower and download all javascript libraries to the libs/vendor directory
    2. Grunt takes all developer written javascript files from js directory, creates directives.js, controllers.js etc and puts them inside the js/build folder
    3. Grunt compiles less files inside the styles/less directory and outputs css file to styles/css
    4. Grunt launches web browser with application deployed on Connect.js
    5. Grunt goes into background mode, listens for any changes made in the code by developer, rebuild the application, and refreshes active browser window
    grunt build

    Prepares application for deployment, by cleaning up directories, installing necesary libraries, running unit tests.

    grunt karma:unit

    Performs karma unit tests for UI.

    Smaller tasks that do cool thinks:

    1. clean - removes cache directories
    2. bower:install - launches Bower automatically, so you don`t need to (smile)
    3. concat - merges all files and compress them
    4. less - compiles LESS into css


    npm i grunt-angular-boilerplate

    DownloadsWeekly Downloads






    Last publish


    • padsbanger