4

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.

Community
  • 1
  • 1
celsomtrindade
  • 4,501
  • 18
  • 61
  • 116

1 Answers1

7

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'
    ]);
};
Louis Barranqueiro
  • 10,058
  • 6
  • 42
  • 52
  • 1
    Another awesome explanation! Thank you very much Louis, it made a lot clear for me to understand how all of this grunt process works, and also, to improve the workflow. Thanks again! – celsomtrindade Nov 19 '15 at 21:55
  • is it possible to have a registerTask like this: `'concat:home', 'ngAnnotate:home', 'uglify:home'` ? Because i want to create multiple files to process only those specific parts, since each of them will contain all of my modules, and I don't to proccess all of them at the same time. Currently I can't do it, there is this error: task not found – celsomtrindade Nov 19 '15 at 22:11
  • 1
    Of course mate! with subtasks, you can run task more efficiently – Louis Barranqueiro Nov 19 '15 at 22:19
  • But what did i do wrong? I was following your example but got that error just by placing the `:home` part – celsomtrindade Nov 19 '15 at 22:23
  • 1
    your subtask in concat, ngAnnotate and uglify should be named home. I updated my awnser with `ngAnnotate:home` and `concat:home` example – Louis Barranqueiro Nov 19 '15 at 22:25
  • Oh, i was doing like this `concat: { home: { ..tasks.....` Just had to get rid of the 'concat' at the begining. Thanks one more time. You saved my day! hahahaha – celsomtrindade Nov 19 '15 at 22:32