1 / 30

The JavaScript Task Runner

The JavaScript Task Runner. Nikhil Walvekar. Grunt. Getting Started Adding to new project Adding to existing project Configuring tasks. Getting started. Based on npm , Node.js package manager. Grunt 0.4.x required Node.js >= 0.8.0 Supports both declarative and scripting style .

adonai
Download Presentation

The JavaScript Task Runner

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The JavaScript Task Runner Nikhil Walvekar

  2. Grunt • Getting Started • Adding to new project • Adding to existing project • Configuring tasks Synerzip Softech Pvt. Ltd.

  3. Getting started • Based on npm, Node.js package manager. • Grunt 0.4.x required Node.js >= 0.8.0 • Supports both declarative and scripting style. • needs GruntFile.js and package.json $>npm install –g grunt-cli Synerzip Softech Pvt. Ltd.

  4. Adding to new project File required: • package.json: used by npm List grunt and used plugins in this. • Gruntfile: Tasks are declared in this. Synerzip Softech Pvt. Ltd.

  5. Package.json { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-nodeunit": "~0.1.2" } } • Utilities to create above file • npm-init • grunt-init Synerzip Softech Pvt. Ltd.

  6. Package.json • List grunt plugins as devDependencies • Make sure that package.json file is pushed to code repository. …. "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-nodeunit": "~0.1.2" } …. $>npm install grunt-contrib-jshint --save-dev Synerzip Softech Pvt. Ltd.

  7. Gruntfile(Gruntfile.js or Gruntfile.coffee) module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: {…..}, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); }; Synerzip Softech Pvt. Ltd.

  8. Gruntfile A Gruntfile is comprised of the following parts: • The "wrapper" function • Project and task configuration • Loading grunt plugins and tasks • Custom tasks Synerzip Softech Pvt. Ltd.

  9. Gruntfile • Wrapper Function • This is basic format • All of grunt code must be inside this function. module.exports = function(grunt) { // Do grunt-related things in here }; Synerzip Softech Pvt. Ltd.

  10. Gruntfile • Project and task configuration • Most of the tasks rely on config information. • <%= %> can be used to refer config properties. // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: {…..}, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); Synerzip Softech Pvt. Ltd.

  11. Gruntfile • Loading grunt plugins and tasks • Make sure that, this plugin is listed in package.json // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); Synerzip Softech Pvt. Ltd.

  12. Gruntfile • Let’s cover “Custom tasks“ in advanced Grunt Synerzip Softech Pvt. Ltd.

  13. Adding to existing project • Add grunt entries to existing package.json • Create “Gruntfile.js”, declare required tasks. $>npm install grunt --save-dev $>npm install grunt-contrib-jshint --save-dev $>…. Synerzip Softech Pvt. Ltd.

  14. Using it • Package.json and Grunfile.js updated, that’s it? This will download and install required Grunt plugins. $>npm install $>grunt <TASK NAME> $>grunt --help Synerzip Softech Pvt. Ltd.

  15. Configuring tasks • Specified under “grunt.initConfig” • Task name and configuration name has to be same. • Types: • Simple task – Has single target • Multi-task – Has multiple targets • Options • Files, Filters, Globbing patterns Synerzip Softech Pvt. Ltd.

  16. Simple Configuration module.exports = function(grunt) { // Project configuration. grunt.initConfig({ ….. concat: { dist: { src: ’lib/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.js' } } }); ……. }; Here is configuration for “concat” task. Synerzip Softech Pvt. Ltd.

  17. Multi-task grunt.initConfig({ ….. concat: { foo: { // configuration specific in case of “foo” }, bar: { // configuration specific in case of “bar” }} }); ……. }; • How to run it • If just “grunt concat” specified, it will run concat for each target. $> grunt concat:foo Synerzip Softech Pvt. Ltd.

  18. Options grunt.initConfig({ concat: { options: { // Task-level options may go here, overriding task defaults. }, foo: { options: { // "foo" target options may go here, overriding task-level options. }, }, bar: { // No options specified; this target will use task-level options. }, }, }); Synerzip Softech Pvt. Ltd.

  19. Files src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b.js' • File Object Format • File Array Format • Array format supports some more options Filter e.g ‘isFile’ or we can specify custom function Globbing e.g. ‘foo/**/*.js’ files: { 'dest/b.js': ['src/bb.js', 'src/bbb.js'], 'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'], } files: [ {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'}, {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'}, ] Synerzip Softech Pvt. Ltd.

  20. Running multiple tasks • Perform certain steps in sequence grunt.registerTask(’release', ['jshint', 'qunit', 'concat', 'uglify']); $> grunt release Synerzip Softech Pvt. Ltd.

  21. Using Uglify • Add plugin grunt-contrib-uglify uglify: { options: { // the banner is inserted at the top of the output banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' }, dist: { files: { 'dist/<%= pkg.name %>.min.js’: ‘lib/**/*.js’ } } } Synerzip Softech Pvt. Ltd.

  22. Using Require.js • Add plugin grunt-contrib-requirejs requirejs: { compile: { options: { baseUrl: "path/to/base", mainConfigFile: "path/to/config.js", out: "path/to/optimized.js" } } } Synerzip Softech Pvt. Ltd.

  23. Advanced grunt • Creating tasks • Custom tasks Synerzip Softech Pvt. Ltd.

  24. Creating task • Basic task • No configuration needed • Arguments are passed to this function grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) { if (arguments.length === 0) { grunt.log.writeln(this.name + ", no args"); } else { grunt.log.writeln(this.name + ", " + arg1 + " " + arg2); } }); $> grunt foo:bar:2 Synerzip Softech Pvt. Ltd.

  25. Custom tasks • Multi-task • Registered function executed for each target i.e. foo, bar, baz grunt.initConfig({ log: { foo: [1, 2, 3], bar: 'helloworld', baz: false } }); grunt.registerMultiTask('log', 'Log stuff.', function() { grunt.log.writeln(this.target + ': ' + this.data); }); Synerzip Softech Pvt. Ltd.

  26. Custom tasks • Running other tasks from custom task grunt.task.run('bar’); Synerzip Softech Pvt. Ltd.

  27. Plugins • You can write your own plugins. Synerzip Softech Pvt. Ltd.

  28. Who uses Grunt? Synerzip Softech Pvt. Ltd.

  29. References • GruntJs.com • Node.js, Ant, Grunt and other build tools • Why grunt? Why not something else? • From the toolbox: Grunt Synerzip Softech Pvt. Ltd.

  30. Questions Synerzip Softech Pvt. Ltd.

More Related