Task not found using grunt

Question

I'm trying to use multiple tasks in grunt, one of them is working partialy, and the other is getting erros of not found task.

This question is based on this one, where I'm using the same gruntfile.js and the same structure, which is this:

├── Gruntfile.js
└── grunt
    ├── config
    │   ├── conf_sass.js
    │   └── conf_home.js
    └── register
        ├── reg_sass.js
        └── reg_home.js

With this respective files:

conf_sass.js

module.exports = function(grunt) {
    grunt.config.set('sass', {

        sass: {
            options: {
                style:'expanded',
                compass: true
            },
            files: {
                'src/css/app.css' : 'src/sass/app.scss'
            }
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'dist/css/app.min.css': 'src/css/app.css'
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
};

reg_sass.js

module.exports = function(grunt) {
    grunt.registerTask('compSass', ['sass']);
};

conf_home.js

module.exports = function(grunt) {
    grunt.config.set('home', {

        concat: {
            dist : {
                src: 'src/.../home/*.js',
                dest: 'src/.../concat_home.js'
            }
        },
        ngAnnotate: {
            options: {
                add: true
            },
            dist: {
                files: {
                    'src/.../concat_home.js': 'src/.../concat_home.js'
                }
            }
        },
        uglify: {
            dist: {
                src:  'src/.../concat_home.js',
                dest: 'app/.../home.min.js'
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-ng-annotate');
};

reg_home.js

module.exports = function(grunt) {
    grunt.registerTask('compHome', ['home']);
};

The problem is:

The sass process, runs everything without erros, but doesn't execute the css minify part, even with no errors at all.

The home process, return an error

Warning: task 'home' not found

What's wrong with it? I have all the modules installed because they were all working before moving to this new structure.

Answer 1

There are several problems :
- the name of your file must be the same name of your task (E.g : ngAnnotate.js -> task : ngAnnotate)
- your task are not grouped by grunt plugins
- name of configuration task and register tasks are shared then you can't set a home configuration task and a home register task because when you call it with grunt home, grunt isn't able to know the task that you are refering to.

You have to respect this rules for configuration task : group configuration tasks that use a same plugins in one file, don't mix grunt-plugins in configuration tasks, Register tasks are there for this job.

The problem with your current configuration, to call cssmin task, you have to run grunt sass:cssmin and it doesn't make sense. That's why by grouping configuration tasks by grunt plugins, you call your cssmin task with grunt cssmin or a subtask in it with grunt cssmin:<subtask_name>

Here is an example :

module.exports = function(grunt) {
    grunt.config.set('sass', { 
        website: {
            options: {
                style:'expanded',
                compass: true
            },
            files: {
                'src/css/app.css' : 'src/sass/app.scss'
            }
        },
        admin: {
            options: {
                style:'expanded',
                compass: true
            },
            files: {
                'src/css/app.css' : 'src/sass/app.scss'
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
};

Here we have registered the sass configuration task, to run it , we use grunt sass. It will run all subtask in it website and admin sub tasks. Now, if we want to run only website task, we run : grunt sass:website

Then in your case, here is what your structure should look like :

├── Gruntfile.js
└── grunt
    ├── config
    │   ├── sass.js
    │   ├── concat.js
    │   ├── cssmin.js
    │   ├── uglify.js
    │   └── ngAnnotate.js
    └── register
        ├── sassAndCssmin.js
        └── home.js

your sass.js file :

module.exports = function(grunt) {
    grunt.config.set('sass', {
        sass: {
            options: {
                style:'expanded',
                compass: true
            },
            files: {
                'src/css/app.css' : 'src/sass/app.scss'
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
};

your cssmin.js file :

module.exports = function(grunt) {
    grunt.config.set('cssmin', {
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'dist/css/app.min.css': 'src/css/app.css'
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-cssmin');
};

your concat.js file :

module.exports = function(grunt) {
    grunt.config.set('concat', {
        home: {
            dist : {
                src: 'src/.../home/*.js',
                dest: 'src/.../concat_home.js'
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
};

your ngAnnotate.js file :

module.exports = function(grunt) {
    grunt.config.set('ngAnnotate', {
        home: {
            options: {
                add: true
            },
            dist: {
                files: {
                    'src/.../concat_home.js': 'src/.../concat_home.js'
                }
            }
        },

    });
    grunt.loadNpmTasks('grunt-ng-annotate');
};

Same process for other configuration tasks.

And here is an example with the register tasks :

your sassAndCssmin.js file:

module.exports = function(grunt) {
    grunt.registerTask('sassAndCssmin', [
        'sass',
        'cssmin'
    ]);
};

your home.js file :

module.exports = function(grunt) {
    grunt.registerTask('home', [
        'concat',
        'ngAnnotate',
        'uglify'
    ]);
};