前端自动化工具grunt的使用

最新推荐文章于 2024-09-18 22:16:17 发布

foreverlove007

最新推荐文章于 2024-09-18 22:16:17 发布

阅读量373

点赞数

分类专栏：工具文章标签：自动化前端

本文链接：https://blog.csdn.net/foreverlove007/article/details/52976432

版权

工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.grunt 的安装

Grunt和Grunt插件是通过npm来实现安装。npm是node.js的一个包管理器。
grunt-cli 是grunt的命令行，必须要安装到全局环境中。

//在Windows环境中
npm install -g grunt-cli

在其他环境中可能需要sudo 命令。

在项目目录运行命令

npm install grunt

安装好grunt，需要配置两份文件，Gruntflie和package.json。

Gruntfile用来配置grunt任务和加载插件的。
package.json是配置这个grunt架构的信息。包括版本，作者，开发依赖项，自定义命令操作等等。

注意：两个文件必须放在根目录下。

2.插件安装

grunt有很多插件，按照项目需求选择合适的grunt插件。在官网中加星号的是grunt项目组负责维护。

npm install --save-dev grunt-contrib-clean

下载插件并将插件保存到package.json的devDependencies中。

devDependencies和dependencies从字面意思上说，一个是开发依赖项，一个是依赖项。devDependencies只是在开发的时候需要，发布的时候并不需要，而denpendencies则是项目能正常工作所依赖的。

3.配置Gruntflie

Gruntfile.js是有效的JavaScript或者CoffeeScript文件，和package.json在一个目录中，并一起提交到版本仓库。

Gruntfile由下面几个部分组成：

wrapper函数
项目与任务配置
插件的加载和配置
自定义任务

1.wrapper函数：

module.exprots = function(grunt){
    //Do something in here
}

所有的配置代码必须放在上面的函数内。

2.项目配置
大部分的Grunt任务都依赖某些配置数据，这些数据被定义在一个object内，并传递给grunt.initConfig 方法。

Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的。此配置主要是以任务名称命名的属性，也可以包含其他任意数据。一旦这些代表任意数据的属性与任务所需要的属性相冲突，就将被忽略。

当运行一个任务时，Grunt会自动查找配置对象中的同名属性。多任务（multi-task）可以通过任意命名的“目标（target）”来定义多个配置。在下面的案例中，concat任务有名为foo和bar两个目标，而uglify任务仅仅只有一个名为bar目标。

grunt.initConfig({
  concat: {
    foo: {
      // concat task "foo" target options and files go here.
    },
    bar: {
      // concat task "bar" target options and files go here.
    },
  },
  uglify: {
    bar: {
      // uglify task "bar" target options and files go here.
    },
  },
});

同时指定任务（task）和目标（target），例如grunt concat:foo或者grunt concat:bar，将只会处理指定目标（target）的配置，而运行grunt concat将遍历所有目标（target）并依次处理。注意，如果一个任务使用grunt.task.renameTask重命名过，Grunt将在配置对象中查找以新的任务名命名的属性。

options属性

在一个任务配置中，options属性可以用来指定覆盖内置属性的默认值。此外，每一个目标（target）中还可以拥有一个专门针对此目标（target）的options属性。目标（target）级的平options将会覆盖任务级的options。

文件files(支持文件对象和文件数组形式)

于大多的任务都是执行文件操作，Grunt有一个强大的抽象层用于声明任务应该操作哪些文件。这里有好几种定义src-dest(源文件-目标文件)文件映射的方式，均提供了不同程度的描述和控制操作方式。任何一种多任务（multi-task）都能理解下面的格式，所以你只需要选择满足你需求的格式就行。

expand 处理动态的src-dest文件映射

动态构建文件

当你希望处理大量的单个文件时，这里有一些附加的属性可以用来动态的构建一个文件列表。
expand 设置为true用于启用下面的选项：

cwd 所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）。
src 相对于cwd路径的匹配模式。
dest 目标文件路径前缀。
ext 对于生成的dest路径中所有实际存在文件，均使用这个属性值替换扩展名。
extDot 用于指定标记扩展名的英文点号的所在位置。可以赋值 ‘first’ （扩展名从文件名中的第一个英文点号开始）或 ‘last’ （扩展名从最后一个英文点号开始），默认值为 ‘first’ [添加于 0.4.3 版本]
flatten 从生成的dest路径中移除所有的路径部分。
rename 对每个匹配的src文件调用这个函数(在重命名后缀和移除路径之后)。dest和匹配的src路径将被作为参数传入，此函数应该返回一个新的dest值。如果相同的dest返回不止一次，那么，每个返回此值的src来源都将被添加到一个数组中作为源列表。

grunt.initConfig({
  uglify: {
    static_mappings: {
      files: [
        {src: 'lib/a.js', dest: 'build/a.min.js'},
        {src: 'lib/b.js', dest: 'build/b.min.js'},
        {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
        {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
      ],
    },
    dynamic_mappings: 
      files: [
        {
          expand: true, 
          cwd: 'lib/',
          src: ['**/*.js'], 
          dest: 'build/', 
          ext: '.min.js',
          extDot: 'first'
        },
      ],
    },
  },
});