http://robertdunaway.github.io

Gulp code kata list

All code katas lists

026 Gulp - running grunt tasks

Duration

10 minutes

Brief

Execute a Grunt task with Gulp.

For more information

Execute a Grunt task with Gulp.

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/026%20Gulp%20-%20running%20grunt%20tasks/before
• After
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/026%20Gulp%20-%20running%20grunt%20tasks/after

Kata

On occasion you might need to combine JSON files.

In this case we are combining multiple JSON files that represent menu items. A suitable gulp plugin is not available but there is a Grunt task that does what we need.

In this task you will perform a JSON merge on all JSON files in the config folder with grunt-merge-json.

Review

Installed the require NPM packages.

npm install grunt-merge-json --save-dev
npm install gulp-grunt --save-dev

Install the Grunt command line interface.

npm install -g grunt-cli

Create a gruntfile.js, in the root, to support the Grunt task.

module.exports = function (grunt) {

    grunt.initConfig({
        distFolder: 'wwwroot/config',

        pkg: grunt.file.readJSON('package.json'),
        "merge-json": {

            menu: {
                src: ['src/config/*.json.txt'],
                dest: 'wwwroot/config/menu.json',
            },
        },
    });

    // Load modules, register tasks
    grunt.loadNpmTasks('grunt-merge-json');
};

To tie everything together add this task to the Gulp file.

// -------------------------------------------------
// Grunt configuration
require('gulp-grunt')(gulp, {
    // These are the default options but included here for readability.
    base: null,
    prefix: 'grunt-',
    verbose: false
});
// -------------------------------------------------

Update the default task.

gulp.task('default', function () {
    runSequence('copy-to-wwwroot', 'grunt-merge-json:menu');
});

After running the default task you should have a new JSON menu file that looks like this.

{
    "0": {
        "name": "Applications",
        "id": "catApps",
        "isOpen": "true",
        "icon": " fa-power-off ",
        "session": "coreSession",
        "role": "MashupUser",
        "groups": [
            {
                "name": "app1",
                "id": "menuItemApp1",
                "desc": "Application 1, page 1.",
                "url": "/app1/page1",
                "icon": " fa-bar-chart ",
                "session": "coreSession",
                "role": "MashupUser"
            },
            {
                "name": "app2",
                "id": "menuItemApp2",
                "desc": "Application 2, page 3.",
                "url": "/app2/page3",
                "icon": " fa-laptop ",
                "session": "coreSession",
                "role": "MashupUser"
            }
        ]
    },
    "1": {
        "name": "Utilities",
        "id": "catUtilities",
        "isOpen": "false",
        "icon": " fa-cogs ",
        "session": "coreSession",
        "role": "MashupUser",
        "groups": []
    },
    "2": {
        "name": "Administrative",
        "id": "catAdmin",
        "isOpen": "false",
        "icon": " fa-users",
        "session": "coreSession",
        "role": "MashupUser",
        "groups": []
    },
    "3": {
        "name": "Examples",
        "id": "catExamples",
        "isOpen": "false",
        "icon": " fa-file-code-o ",
        "session": "coreSession",
        "role": "MashupUser",
        "groups": []
    }
}

Next

Take a few minutes and imagine more examples.