Install
Install the grunt task.
yarn add --dev @benningfield-group/grunt-build-angularjs
Install peer dependencies.
yarn add --dev grunt-angular-templates@~0.5.7 grunt-babel@^6.0.0 grunt-contrib-clean@~0.6.0 grunt-contrib-concat@~0.5.1 grunt-contrib-copy@~0.8.0 grunt-contrib-cssmin@~0.12.3 grunt-contrib-jshint@~0.11.2 grunt-contrib-uglify@~0.9.2 grunt-filerev@~2.3.1 grunt-usemin@~3.0.0 jshint-stylish@^2.2.1
Configuration
Create a Gruntfile.js and set up the gruntBuildAngularJS task. The task takes two options.
- angularModuleName: A string that is the name of your base AngularJS module. Note that there must be a JS file in the root directory matching this name (e.g. BGI.GruntBuildAngularJSExample.js in the example below).
- indexFile: An optional string that specifies the entry point for your single-page application. This option defaults to "index.html."
module.exports = function(grunt) {
'use strict';
grunt.loadNpmTasks('@benningfield-group/grunt-build-angularjs');
grunt.initConfig({
buildAngularJS: {
prod: {
options: {
angularModuleName: 'BGI.GruntBuildAngularJSExample',
indexFile: 'index.html'
}
}
}
});
grunt.registerTask('default', [
'buildAngularJS'
]);
};In your index file, specify build comments. Note that the final JavaScript
build tag is important. It must follow the format \js/${angularModuleName}.min.js`(e.g.js/BGI.GruntBuildAngularJSExample.min.js` in the example below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>grunt-build-angularjs-example</title>
<!-- build:css css/lib.min.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endbuild -->
<!-- build:css css/grunt-build-angularjs.min.css -->
<link rel="stylesheet" href="clock/clock.css">
<!-- endbuild -->
</head>
<body ng-app="BGI.GruntBuildAngularJSExample">
<div class="container">
<div class="row">
<div class="col-xs-12">
An example of the grunt-build-angularjs Grunt task.
</div>
</div>
<clock></clock>
</div>
<!-- build:js js/lib.min.js -->
<script src="node_modules/angular/angular.min.js"></script>
<!-- endbuild -->
<!-- build:js js/BGI.GruntBuildAngularJSExample.min.js -->
<script src="BGI.GruntBuildAngularJSExample.js"></script>
<script src="clock/clock.js"></script>
<!-- endbuild -->
</body>
</html>Building
Simply run grunt. You can get some additional output using the -v
(verbose) flag. The resulting built project will be in a build folder.
Example
See the @benningfield-group/grunt-build-angularjs-example repository: https://bitbucket.org/benningfieldsuperitteam/grunt-build-angularjs-example