grunt打包学习笔记

2018-07-30 本文已影响0人 weiee

检查CAD前端安全的时候发现login.html文件内有<script>代码块，而前端登录在对接COP后实现单点登录似乎不需要login.html文件。全局搜索后发现grunt打包文件中有对login.html操作的代码。而该Gruntfile.js文件似乎有许多无用的代码。因此想学习一下grunt打包文件里几个函数的作用以及命令行输入grunt命令后该文件的执行逻辑。

外部引用模块

var fs = require('fs');在nodejs中，每个文件都被视为独立的模块，nodejs自带核心模块在其源代码的lib/文件目录下，require()总是优先加载核心模块，即使有同名的自定义文件。

module.exports

在每个模块中，module是指向表示当前模块的对象的引用。module.exports用于指定一个模块所要输出的内容，即可通过require()访问。exports只变量在模块内有效，不能作为模块内容输出。而exports.attr可作为模块的属性输出。

grunt.initConfig()

Grunt的task配置都是在 Gruntfile.js文件中的grunt.initConfig()方法中指定的。该方法接受两个参数：

变量
task类型

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),    //变量
  concat: {}    //task类型
});

task类型属性包括：1. options; 2. 具体的target，target属性又包括：options、files属性。

task: {
  options: {},
  target: {
    files: [],
    options: {}
  }
}

~~奇怪的是除了Grunt官方网站的tasks章节，我并没有找到针对task的options属性和files属性的说明。~~

task与target

多个任务可通过不同的target进行配置。执行grunt concat:foo会指定处理concat任务下的foo目标，而执行grunt concat则会遍历concat任务下的所有目标并处理。

options属性

官网中只说明内层options可覆盖外层，即target层覆盖task层，task层覆盖默认值，并未说明options属性的作用。~~看来要自己挖掘了。~~

files属性

grunt提供源文件-目标文件映射方式，用于task进行操作。所有的文件格式均支持src与dest属性，而Compact与Files Array格式还支持一些额外的操作属性。

files格式

简洁格式（Compact Format）：允许单个的src或dest文件映射方式，常用于只读的任务，例如grunt-contrib-jslint检查任务，只需要src属性，并不关心dest属性。支持附加属性。

jshint: {
  foo: {
    src: ['src/x.js', 'src/y.js']
  }
}

文件对象格式（Files Object Format）：支持多个src-dest映射，属性名是目标文件，属性值是源文件。可利用该格式指定多个映射，但是不能给每个映射指定附加属性。

concat: {
  foo: {
    files: {
      'dest/a.js': ['src/aa.js', 'src/aaa.js'],
      'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
    }
  }
}

文件数组格式（Files Array Format）：文件数组格式（Files Array Format）：同Files Object Format，但是可以支持附加属性。

concat: {
  foo: {
    files: [
      {src: ['src/a.js', 'src/b.js'], dest: ['dest/a/'], nonull: true},
      {src: ['src/a1.js', 'src/b1.js'], dest: ['dest/a1/'], filter: 'isFile'},
    ]
  }
}

files格式之：grunt通配符

Grunt通过内置支持node-glob 和 minimatch 库来匹配文件名(又叫作globbing)。
~~又是一个自己的不知道的东西TT，前端路漫漫啊~~
简单常用通配符如下：

* 匹配任意数量的字符，但不匹配 /
? 匹配单个字符，但不匹配 /
** 匹配任意数量的字符，包括 /，只要它是路径中唯一的一部分
{} 允许使用一个逗号分割的“或”表达式列表
! 在模式的开头用于排除一个匹配模式所匹配的任何文件

动态构建文件对象

compact和files array格式可附加额外的属性，expand设置为true将启用以下选项：

cwd: src指定的匹配都相对于（但不包括）此处指定的路径；
src: 相对于cwd的路径匹配；
dest: 目标文件路径；
ext: 替换所有dest路径中文件的扩展名；
extDot: 用于指定扩展名的dot所在位置，'first'从第一个dot开始，'last'从最后一个dot开始。默认值为'first'；
flatten: 从生成的dest路径中移除所有的路径部分；
rename: 值为一个函数，dest和src可作为参数，返回新的目标地址和文件名；

注意：如果不设置expand:true属性，除src和dest属性外，即使添加了其他附加属性，执行grunt时也不可用。

模板

适用<% %>分隔符指定的模板会在任务读取配置时进行自动扩展扫描，模板会被递归的展开。

<%= prop %>会自动展开配置信息中prop的值，不仅可引用字符串，还可引用数组或其他类型的值；
<% %>执行内联的JavaScript代码，常用于控制流或循环。

grunt.loadNpmTasks()

该方法是grunt.task模块下的loadNpmTasks()方法的别名，用于加载外部插件。

grunt.option()

用于在多个任务之间共享参数，访问命令行中设置的参数。例如在命令行中：grunt userTask --target=dev会让grunt.option('target')返回dev。Boolean型参数可直接仅指定key，而省略value。例如，在命令行执行grunt deploy --staging将会使 grunt.option('staging') 返回 true。设置（获取）option:grunt.option(key[, val])

注意：在命令行输入grunt而不填加任何参数，则会默认执行名为default的任务。因此，如果要无参数执行grunt注意要在Gruntfile.js里定义default任务。

// By default, lint and run all tests.
grunt.registerTask('default', ['task']);

grunt.registerTask()

该方法是grunt.task模块下的registerTask ()方法的别名，用于创建任务。支持以下两种类型：

Alias task：作为1个或多个已注册任务列表（taskList）的别名。taskList参数类型为数组。description参数作为描述在执行grunt --help时会显示

grunt.task.registerTask(taskName, description, taskList)

Function task：taskFunction类型为函数，每当任务运行时，指定的函数（taskFunction）都会被执行，可作为用户自定义任务。

grunt.task.registerTask(taskName, description, taskFunction)

在任务函数内部，可执行其他的任务：

grunt.registerTask('foo', 'My "foo" task.', function() {
  // Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.
  grunt.task.run('bar', 'baz');
  // Or:
  grunt.task.run(['bar', 'baz']);
});

参考文章：

grunt中文网