一、入口函数

javascriptmodule.exports = function(grunt){
    //在这里配置你的grunt任务
}

二、packagjson导入

javascriptmodule.exports = function(grunt){
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
}

三、任务配置

grunt的任何插件,配置接口形式都是一致的。都是在任务对象中包含有options配置对象和打包的配置。比如:

javascriptconcat: {
    options: {

    },
    dist: {

    }
}

其中options对象中是改任务插件提供的配置参数,具体设置需要参考对应插件文档。

多目标配置

如果要实现一个任务,多个目标的配置呢?

javascriptconcat: {
    foo: {
        // 这里是concat任务'foo'目标的选项和文件
        options:{},
        dist:{}
    },
    bar: {
        // 这里是concat任务'bar'目标的选择和文件
        options:{},
        dist:{}
    }
}

指定一个像grunt concat:foo或者grunt concat:bar的任务和目标只会处理指定的任务目标配置,而运行grunt concat将遍历所有的(定义在concat任务中的)目标并依次处理。注意,如果一个任务使用grunt.renameTask重命名过,Grunt将在配置对象中查找新的任务名称属性。

注意,不是所有的grunt 任务模块都支持多目标任务配置,所以,请看对应模块的官方文档

options配置

同一任务的options配置存在全局配置和局部配置。局部配置可以覆盖全局配置。

javascriptgrunt.initConfig({
    concat: {
        options: {
            // 这里是任务级的Options,覆盖任务的默认值 
        },
        foo: {
            options: {
                // 这里是'foo'目标的options,它会覆盖任务级的options.
            }
        },
        bar: {
            // 没有指定options,这个目标将使用任务级的options
        }
    }
});

简洁文件配置

1.单独任务

a.单个任务(concat)单个目标(bar)单个src-dest映射

javascriptconcat: {
    bar: {
        src: ['src/bb.js', 'src/bbb.js'],
        dest: 'dest/b.js'
    }
}

b.单个任务单个目标,多个src-dest映射,需要用到特定的files数组来包裹多个src-dest 对象

javascriptconcat: {
    files: [{
        src: ['src/aa.js', 'src/aaa.js'],
        dest: ['src/a.js']
    }, {
        src: ['src/bb.js', 'src/bbb.js'],
        dest: ['src/b.js']
    }]
}

2.多个任务配置

a.多任务,单目标配置

javascriptconcat: {
    bar: {
        src: ['src/bb.js', 'src/bbb.js'],
        dest: 'dest/b.js'
    }
},
uglify: {
    bar: {
        src: ['dest/b.js'],
        dest: 'dest/b.min.js'
    }
}

b.多任务,多个目标配置(略...)

动态文件对象构建

如果想针对某个文件夹下面的所有子目录及某种格式文件进行任务处理,那么,就不必如同以上那种指定文件名来进行构建了,这里就需要动态构建。

javascriptcssmin: {
    files: [{
        expand: true,
        cwd: './dev/css/',//文件目标位置
        src: ['**/*.css', '!*.min.css'], //文件匹配
        dest: './build/css/', //打包到build的css目录中
        ext: '.css' //扩展格式
    }]
}

四、任务安装和注册

模块安装

模块安装使用grunt.loadNpmTasks(taskName)方法,比如安装grunt-contrib-concat,就这么调用:

javascriptgrunt.loadNpmTasks('grunt-contrib-concat')

任务注册

grunt默认使用default作为任务名。例如:

javascriptgrunt.registerTask('default', ['requirejs', 'concat', 'csscomb', 'imagemin']);

当我执行grunt命令时,就会把'requirejs', 'concat', 'csscomb', 'imagemin'这些任务全部执行。

当然,你也可以把'default'改成其他名称,比如'mytask'。

任务执行

若是你应经使用npm安装了任务需要的模块到本地(或者全局),那么直接执行grunt yourTaskName命令即可。

否则,你需要先执行npm install命令,这样会将package.json中的模块安装到当前开发区,然后再执行grunt命令。

也可以初始建立一个空的package.json文件,然后安装想要的模块,package.json会自动更新你已经安装的模块的配置信息。

执行顺序依照grunt.registerTask中的参数数组中指定的顺序。

五、参考资料:

http://www.gruntjs.org/article/configuring_tasks.html


52lidan
2.8k 声望85 粉丝

写代码要有追求


引用和评论

0 条评论