gt-grunt

Experimenting with Grunt

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may play with this Grunt project.

Details on Gruntfile.js

Custom tasks include: default, serve, test, build and deploy.

Invoking task using the following command:

grunt [default | serve | tests | unit-tests | e2e-tests | build | deploy]

Custom Tasks

"default"

Used at a certain development milestone to restart the web server and perform: jshint, test & serve.

"serve"

Start the web server, and work in tandem with grunt-contrib-watch that will watch for files change & trigger a live reload when files change.

"tests", "unit-tests", "e2e-tests"

Run the unit and e2e tests. Unit tests focus on testing small isolated parts of the application. The unit tests are kept in the test/unit directory. The project is configured to use Karma to run the unit tests.

For tests task, the unit tests are run once, and the E2E tests continue even when there is fail test(s);

For unit-tests task, the server stays on, and unit tests are automatically re-executed whenever the Javascript files change.

For e2e-tests task, when e2e tests stop when encounter a fail test.

E2E tests ensure that the application as a whole operates as expected. They are designed to test the whole client side application, in particular that the views are displaying and behaving correctly. It does this by simulating real user interaction with the real application running in the browser. The E2E tests are kept in the test/e2e directory.

The project is configured to use Protractor to run the E2E tests for the application. Protractor relies upon a set of drivers to allow it to interact with the browser. The drivers need to be installed (only once) before running the e2e tests. The script is included in the node_modules\.bin folder after installation of Protractor, and it is integrated with npm and configured in the `package.json' file, as shown below.

"scripts": {
  "preupdate-webdriver": "npm install",
  "update-webdriver": "webdriver-manager update"
  // when behind corporate proxy
  //"update-webdriver": "webdriver-manager update --proxy=http://proxy:8080/"
}

Install the drivers by running

npm run update-webdriver

"build"

Run this task to build the final artifacts and store them on the "dist" folder.

The built artifacts can be manually verified on the local web server before deployment using the following:

grunt serve:build

"deploy"

Deploying the files in "dist" folder to the deployment repository on Github. Cloud web server, like Azure website, can be linked to the Github repository to pull deployment artifacts. Also, whenever the repository is updated, Azure website will also be redeployed.

Tasks

"shell" - grunt-shell

Invoking shell commands, such as bower install.

"newer:jshint" - grunt-contrib-jshint

Validate Javascript files with JSHint. See the JSHint documentation for a list of supported options.

grunt-newer is used in conjunction with other task that needs to run with newer files only.

"wiredep" - grunt-wiredep

Inject Bower package artifacts into the specified source code file. For example, the file specifies css injection:

<!-- bower:css -->
<!-- endbower -->

"concurrent" - grunt-concurrent

Running non-dependent tasks concurrently can potentially improve your build time significantly.

"autoprefixer" - grunt-autoprefixer

Parses CSS and adds vendor-prefixed CSS properties using the Can I Use database.

"usemin" - grunt-usemin

Replaces the references of scripts, stylesheets and other assets within HTML files dynamically with optimized versions of them. To do this usemin exports 2 built-in tasks called useminPrepare and usemin. Plugins used in optimizing files:

concat concatenates files (usually JS or CSS).
uglify minifies JS files.
cssmin minifies CSS files.
filerev revisions static assets through a file content hash, for browser caching purposes.

"ngmin" - grunt-ngmin

Pre-minifying Angular apps. Depracated in favor of ng-annotate

"copy" - grunt-contrib-copy

Copy files and folders.

"cdnify" - grunt-google-cdn

Replacing refs to resources on the Google CDN.

For example, replacing the following:

<script src="https://github.com/gthendean/gt-grunt/raw/master/bower_components/angular-route/angular-route.js"></script>

with

<script src="https://github.com/gthendean/gt-grunt/raw/master//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>

"htmlmin" - grunt-contrib-htmlmin

Minify HTML.

"gh-pages" - grunt-gh-pages

Publish to GitHub Pages. The step includes: create a temporary clone of the current repository, create a gh-pages branch if one doesn't already exist, copy over all files from the dist directory that match patterns from the src configuration, commit all changes, and push to the origin remote.

"protractor" - grunt-protractor-runner

Protractor is an end-to-end test framework for AngularJS applications. Protractor is a Node.js program built on top of WebDriverJS. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Test

See karma.conf.js.

"karma" - karma

A simple tool that allows you to execute JavaScript code in multiple real browsers.

"karma-jasmine" - karma-jasmine

Adapter for the Jasmine testing framework.

"karma-phantomjs-launcher" - karma-phantomjs-launcher

Launcher for PhantomJS.

PhantomJS is a solution for: headless website testing, screen capture, page automation, and network monitoring.

gthendean / gt-grunt

readme