Grunt前端自动化构建工具使用总结

Grunt是目前比较流行的前端工程自动化构建工具。通过Grunt可以很方便的实现代码的质量检测、复制、合并、压缩、替换等。Grunt通过插件扩展的形式实现对应的各种功能。而这些功能的配置参数是在Gruntfile.js中完成的。本文主要介绍对实现Grunt相关任务在Gruntfile.js中配置方法。下面是Grunt的logo，看起来就屌屌的。

配置Grunt

从官网下载package.json和Gruntfile.js 文件放到项目根目录，并对文件进行修改配置.

package.json //项目自动化所依赖的相关插件。

Gruntfile.js //项目自动化工作流配置文件(本文讲解的重点)。

package.json 文件的基本内容：

package

Gruntfile.js的配置

Grunt的task配置都是在 Gruntfile 中的grunt.initConfig 方法中指定的。此配置主要是以任务名称命名的属性，也可以包含其他任意数据。一旦这些代表任意数据的属性与任务所需要的属性相冲突，就将被忽略。此外，由于这本身就是JavaScript，因此你不仅限于使用JSON；你可以在这里使用任何有效的JavaScript。必要的情况下，你甚至可以以编程的方式生成配置。再比如,当运行一个任务时，Grunt会自动查找配置对象中的同名属性。多任务（multi-task）可以通过任意命名,的“目标（target）”来定义多个配置。在下面的案例中，concat任务有名为foo和bar两个目标，而uglify任务仅仅只有一个名为bar目标。
grunt.initConfig({
concat: {
    // 这里是concat任务的配置信息。
    foo: {
      // concat task "foo" target options and files go here.
    },
    bar: {
      // concat task "bar" target options and files go here.
    },
  },
  uglify: {
    // 这里是uglify任务的配置信息
    bar: {
      // uglify task "bar" target options and files go here.
    },
  },
  // 任意数据。
  my_property: 'whatever',
  my_src_files: ['foo/*.js', 'bar/*.js'],
});
同时指定任务（task）和目标（target），例如grunt concat:foo或者grunt concat:bar，将只会处理指,定目标（target）的配置，而运行grunt concat将遍历所有目标（target）并依次处理。注意，如果一个任务使用grunt.task.renameTask重命名过，Grunt将在配置对象中查找以新的任务名命名的属性。

注册任务

如果指定了一个任务列表，新任务将是这一个或多个指定任务的别名。当运行此 “任务别名” 时，在taskList中指定的每个任务都会按照其出现的顺序依次执行。taskList参数必须是一个任务组
grunt.registerTask(taskName, [description, ] taskList)
下面的任务别名案例中定义了一个 ‘default’ 任务，如果运行Grunt时没有指定任何任务，它将自动执行’jshint’、’qunit’、’concat’ 和 ‘uglify’ 任务
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
如果你没有指定一个任务，并且你已经定义一个名为 “default” 的任务，那么该任务将会默认被执行

总结

一句话总结Grunt执行过程：定义任务、注册任务、执行任务。暂时先总结这些吧，连续好几天没睡好了，睡觉了。

本文由 xiesai 创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:2018-03-01 00:00:00