使用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 ( Eg : 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'
    ]);
};