grunt dynamic task on watch event

Question

Hi i have a problem i need to watch less tasks for different directory. I need a method to edit the less task and instead to duplicate them i need to use a variable dir inside it.

there is my code:

module.exports = function(grunt) {

grunt.initConfig({
    pkg : grunt.file.readJSON('package.json'),

    dirLess : 'less',
    dirCss : 'css',
    dirImages : 'images',
    dirDT : 'theme-cdt',
    dirPB : 'theme-cpb',
    dirMCS : 'theme-cmcs',
    dirSprites : '<%= dirImages %>/sprites',
    dirIconFont : './fonts',
    dirCssMin : '<%= dirCss %>/min',
    less : {
        devDT : {
            options : {
                outputSourceFiles: true,
                sourceMap : true,
                sourceMapFilename : '<%= dirDT %>/<%= dirCss %>/style.css.map',
                sourceMapBasepath : '<%= dirDT %>/<%= dirCss %>/',
            },
            files : {
                '<%= dirDT %>/<%= dirCss %>/style.css' : '<%= dirDT %>/<%= dirLess %>/style.less'
            },
        },
        devIeDT : {
            files : {
                '<%= dirDT %>/<%= dirCss %>/style-ie9-bootstrap.css': '<%= dirDT %>/<%= dirLess %>/style-bootstrap.less',
                '<%= dirDT %>/<%= dirCss %>/style-ie9-common.css': '<%= dirDT %>/<%= dirLess %>/style-common.less',
                '<%= dirDT %>/<%= dirCss %>/style-ie9-view.css': '<%= dirDT %>/<%= dirLess %>/style-view.less',
                '<%= dirDT %>/<%= dirCss %>/style-ie8.css': '<%= dirDT %>/<%= dirLess %>/style-ie8.less'
            },
        },
        devPB : {
            options : {
                outputSourceFiles: true,
                sourceMap : true,
                sourceMapFilename : '<%= dirPB %>/<%= dirCss %>/style.css.map',
                sourceMapBasepath : '<%= dirPB %>/<%= dirCss %>/',
            },
            files : {
                '<%= dirPB %>/<%= dirCss %>/style.css' : '<%= dirPB %>/<%= dirLess %>/style.less'
            },
        },
        devIePB : {
            files : {
                '<%= dirPB %>/<%= dirCss %>/style-ie9-bootstrap.css': '<%= dirPB %>/<%= dirLess %>/style-bootstrap.less',
                '<%= dirPB %>/<%= dirCss %>/style-ie9-common.css': '<%= dirPB %>/<%= dirLess %>/style-common.less',
                '<%= dirPB %>/<%= dirCss %>/style-ie9-view.css': '<%= dirPB %>/<%= dirLess %>/style-view.less',
                '<%= dirPB %>/<%= dirCss %>/style-ie8.css': '<%= dirPB %>/<%= dirLess %>/style-ie8.less'
            },
        },
        devMCS : {
            options : {
                outputSourceFiles: true,
                sourceMap : true,
                sourceMapFilename : '<%= dirMCS %>/<%= dirCss %>/style.css.map',
                sourceMapBasepath : '<%= dirMCS %>/<%= dirCss %>/',
            },
            files : {
                '<%= dirMCS %>/<%= dirCss %>/style.css' : '<%= dirMCS %>/<%= dirLess %>/style.less'
            },
        },
        devIeMCS : {
            files : {
                '<%= dirMCS %>/<%= dirCss %>/style-ie9-bootstrap.css': '<%= dirMCS %>/<%= dirLess %>/style-bootstrap.less',
                '<%= dirMCS %>/<%= dirCss %>/style-ie9-common.css': '<%= dirMCS %>/<%= dirLess %>/style-common.less',
                '<%= dirMCS %>/<%= dirCss %>/style-ie9-view.css': '<%= dirMCS %>/<%= dirLess %>/style-view.less',
                '<%= dirMCS %>/<%= dirCss %>/style-ie8.css': '<%= dirMCS %>/<%= dirLess %>/style-ie8.less'
            },
        }
    },
    watch : {
        devDT : {
            files : [ '<%= dirDT %>/<%= dirLess %>/*.less', '<%= dirDT %>/<%= dirLess %>/bootstrap-less/*.less', '<%= dirDT %>/<%= dirLess %>/bootstrap-less/mixins/*.less',
                      '<%= dirDT %>/<%= dirLess %>/common/*.less', '<%= dirDT %>/<%= dirLess %>/components/*.less', '<%= dirDT %>/<%= dirLess %>/plugin/*.less', '<%= dirDT %>/<%= dirJsAcc %>/*.js',
                      '<%= dirDT %>/<%= dirIconFont %>/_iconfont.less', 'Gruntfile.js' ], // '<%= dirJs %>/*.js'
            tasks : [ 'less:devDT', 'less:devIeDT' ], // 'uglify:dev', 'autoprefixer:all'
            options : {
                livereload: 12344,
                reload: true
            },
        },
        devPB : {
            files : [ '<%= dirPB %>/<%= dirLess %>/*.less', '<%= dirPB %>/<%= dirLess %>/bootstrap-less/*.less', '<%= dirPB %>/<%= dirLess %>/bootstrap-less/mixins/*.less',
                      '<%= dirPB %>/<%= dirLess %>/common/*.less', '<%= dirPB %>/<%= dirLess %>/components/*.less', '<%= dirPB %>/<%= dirLess %>/plugin/*.less', '<%= dirPB %>/<%= dirJsAcc %>/*.js',
                      '<%= dirPB %>/<%= dirIconFont %>/_iconfont.less', 'Gruntfile.js' ], // '<%= dirJs %>/*.js'
            tasks : [ 'less:devPB', 'less:devIePB' ], // 'uglify:dev', 'autoprefixer:all'
            options : {
                livereload: 12346,
                reload: true
            },
        },
        devMCS : {
            files : [ '<%= dirMCS %>/<%= dirLess %>/*.less', '<%= dirMCS %>/<%= dirLess %>/bootstrap-less/*.less', '<%= dirMCS %>/<%= dirLess %>/bootstrap-less/mixins/*.less',
                      '<%= dirMCS %>/<%= dirLess %>/common/*.less', '<%= dirMCS %>/<%= dirLess %>/components/*.less', '<%= dirMCS %>/<%= dirLess %>/plugin/*.less', '<%= dirMCS %>/<%= dirJsAcc %>/*.js',
                      '<%= dirMCS %>/<%= dirIconFont %>/_iconfont.less', 'Gruntfile.js' ], // '<%= dirJs %>/*.js'
            tasks : [ 'less:devMCS', 'less:devIeMCS' ], // 'uglify:dev', 'autoprefixer:all'
            options : {
                livereload: 12347,
                reload: true
            },
        }
    },
    concurrent: {
        all: {
            tasks: ['watch:devDT', 'watch:devPB', 'watch:devMCS'],
            options: {
                logConcurrentOutput: true
            }
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-concurrent');

grunt.registerTask('default', [ 'less:devMCS', 'less:devIeMCS', 'less:devPB', 'less:devIePB', 'less:devDT', 'less:devIeDT' ]);
grunt.registerTask('conc', ['concurrent:all'])
// grunt.registerTask('mcs', [ 'watch:devMCS' ]);
// grunt.registerTask('pb', [ 'watch:devPB' ]);
// grunt.registerTask('dt', [ 'watch:devDT' ]);
};

I need to compact all the same less task in one generic that can be used dynamically with one less:dev passing the directory to the task.

i search in internet, the only thing that i found is use global variable on task call, but when this event are nested in other event this variable are lost in nested event (e.g. watch task take the variable but the less task runing inside this watch task are lost and not set).

thanks

score 1 · Accepted Answer · answered Jun 19 '15 at 11:53

Use arguments passed to your tasks to make on the fly "custom" tasks. For example:

watch: {
    service: {
        files: ['src/**/*.*'],
        tasks: ['<%= grunt.task.current.args[1] %>']
    }
}

Then you can pass in values (myARG in this case) to the task:

grunt.registerTask('serve', ['build', 'watch:service:myARG']);

Which makes the task equivalent to

watch: {
    service: {
        files: ['src/**/*.*'],
        tasks: ['myARG']
    }
}

You can pass in multiple values with more colons : if you need to.

grunt dynamic task on watch event

1 Answers1

Linked