使用grunt-hub实现多个grunt项目一次运行

作为前端开发人员，grunt是一个非常好的自动化工具，可以简化你的工作，减轻你的劳动。而且grunt提供了数量庞大的插件供使用。

首先，简单安装grunt(首先需要安装node及npm环境)：

1、安装全局 grunt-cli:

npm install -g grunt-cli

2、新建项目及添加配置文件： package.json；此文件放置于根目录，并与gruntfile.js文件处于同一目录，主要用于存储需要依赖的npm模块及grunt插件模块，如：

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

如果你有node项目，也使用了package.json文件，则可以使用同一个；

3、安装grunt：

在项目目录，使用以下命令进行安装：

npm install grunt --save-dev

4、安装grunt插件：

在这里，就使用js及css压缩及使用grunt-hub进行多个grunt项目实现。

首先安装grunt-hub：

npm install grunt-hub --save-dev

安装css压缩插件：

npm install grunt-contrib-cssmin --save-dev

安装js压缩插件：

npm install grunt-contrib-uglify --save-dev

安装完后，就开始配置gruntfile.js文件，根据每个插件的api进行相关的配置。

下面开始使用grunt-hub完成多个grunt文件一次性执行：

在项目下创建grunt文件夹，用于存放所有grunt配置文件，尤其对于较大项目时，可以将整个grunt按一定方式分开，再统一执行。下面，我们将js及css压缩分开执行进行说明：

1、在grunt文件夹下，首先创建gruntJs.js文件夹，用于打包压缩js文件：

module.exports = function(grunt) {
    grunt.initConfig({
        uglify: {
            js: {
                files: {
                    '../public/js/main.min.js': [
                        '../public/js/common.js',
                    ]
                }
            }
        }
    });
    grunt.loadTasks('../node_modules/grunt-contrib-uglify/tasks');
    grunt.registerTask('default', [ 'uglify']);
};

这里，使用的是grunt-contrib-uglify进行压缩，具体用法可以参照grunt-contrib-uglify使用;

2、在grunt文件夹下创建gruntCss.js文件，用于打包压缩css文件：

module.exports = function(grunt) {
    grunt.initConfig({
        cssmin: {
            js: {
                files: {
                    ‘../public/css/main.min.css’: [
                        ‘../public/css/custom.css’,
                        ‘../public/css/style.css’
                    ]
                }
            }
        }
    });
    grunt.loadTasks(‘../node_modules/grunt-contrib-cssmin/tasks’);
    grunt.registerTask(‘default’, [ ‘cssmin’]);
};

这里，使用的是grunt-contrib-cssmin进行压缩，具体用法可以参照 grunt-contrib-cssmin使用 ;

3、在根目录下，创建Gruntfile.js文件，此文件为grunt入口文件，也是启动文件,内容如下：

module.exports = function(grunt) {
    grunt.initConfig({
        hub: {
            all: {
                src: [‘./grunt/gruntCss.js’, ‘./grunt/gruntJs.js’]，
                //tasks: [‘jshint’, ‘nodeunit’],
            }
        }
    });
    grunt.loadNpmTasks(‘grunt-hub’);
    grunt.registerTask(‘default’, [ ‘hub’]);
};

这里，使用了grunt-hub文件，在里面有src参数，可以设置需要执行的grunt文件的相对地址，而且还有一个tasks参数，可以不用设置，如果不设置，则是自动执行每个地址下grunt文件里的default任务，如果设置，则是执行设置的任务。

完成后，在项目下打开命令行，执行

grunt

后，便可以将js及css进行压缩打包了。