使用 grunt 找不到任务

Question

我正在尝试在 grunt 中使用多个任务，其中一个是部分工作，另一个是not found task.

这个问题基于this one，我使用gruntfile.js相同的结构，这是这样的：

??? Gruntfile.js
??? grunt
    ??? config
    ?   ??? conf_sass.js
    ?   ??? conf_home.js
    ??? register
        ??? reg_sass.js
        ??? reg_home.js

有了这个各自的文件：

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']);
};

问题是：

sass 进程在没有错误的情况下运行所有​​内容，但不执行 css minify 部分，即使根本没有错误。

home进程，返回错误

警告：找不到任务“家”

它出什么问题了？我已经安装了所有模块，因为它们在迁移到这个新结构之前都在工作。

Answer 1

有几个问题：
-您的文件名必须与您的任务名称相同（例如：ngAnnotate.js->任务：ngAnnotate）
-您的任务未按 grunt 插件分组
-配置任务和注册任务的名称是共享的，然后您就可以了t 设置home配置任务和home注册任务，因为当您使用 调用它时grunt home，grunt 无法知道您所指的任务。

你必须尊重配置任务的这个规则：在一个文件中将使用相同插件的配置任务分组，不要在配置任务中混合使用 grunt-plugins，注册任务是为这项工作准备的。

您当前配置的问题，要调用cssmin任务，您必须运行grunt sass:cssmin并且没有意义。这就是为什么通过 grunt 插件对配置任务进行分组，您可以调用cssmin任务grunt cssmin或其中的子任务grunt cssmin:<subtask_name>

这是一个例子：

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');
};

这里我们已经注册了sass配置任务，要运行它，我们使用grunt sass. 它将运行它网站中的所有子任务和管理子任务。现在，如果我们只想运行网站任务，我们运行： grunt sass:website

那么在您的情况下，您的结构应该如下所示：

??? Gruntfile.js
??? grunt
    ??? config
    ?   ??? sass.js
    ?   ??? concat.js
    ?   ??? cssmin.js
    ?   ??? uglify.js
    ?   ??? ngAnnotate.js
    ??? register
        ??? sassAndCssmin.js
        ??? home.js

你的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'
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
};

你的cssmin.js文件：

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');
};

你的concat.js文件：

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

你的ngAnnotate.js文件：

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');
};

其他配置任务的过程相同。

这是注册任务的示例：

你的sassAndCssmin.js文件：

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

你的home.js文件：

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