美文网首页
grunt打包学习笔记

grunt打包学习笔记

作者: weiee | 来源:发表于2018-07-30 18:58 被阅读0次

检查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-globminimatch 库来匹配文件名(又叫作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属性,除srcdest属性外,即使添加了其他附加属性,执行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中文网

相关文章

  • grunt打包学习笔记

    检查CAD前端安全的时候发现login.html文件内有 代码块,而前端登录在对接COP后实现单点登录似乎不需要l...

  • <<Grunt vs Gulp>>有感

    1.grunt通过配置打包代码.gulp通过代码打包,代码量来讲比grunt少. 2.grunt书写样式类似树形可...

  • Grunt学习笔记

    Grunt配置 Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定...

  • Grunt学习笔记

    Grunt是一个基于Node.js的项目构建工具。对于需要反复重复的任务,例如压缩(minification)、编...

  • grunt打包问题

    1、Running "qunit:all" (qunit) task Testing tests/tests.ht...

  • grunt学习笔记(1)

    grunt 简介:Grunt是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。。 Grunt ...

  • 了解webpack

    1.webpack与grunt、gulp的不同 Webpack是⼀个模块打包器,他可以递归的打包项⽬中的所有模块,...

  • 第三天:Grunt等前端自动化工具学习

    作者:小锋子日期:2016-6-6 Grunt学习笔记 王福朋的博客 读书:JavaScript Web 应用开发...

  • 了解webpack

    打包工具还有:webpack,grunt,gulpwebpack功能和扩展性好 webpack 概念 webpac...

  • 前端面试之webpack面试常见问题

    1:什么是webpack和grunt和gulp有什么不同 答案:Webpack是一个模块打包器,他可以递归的打包项...

网友评论

      本文标题:grunt打包学习笔记

      本文链接:https://www.haomeiwen.com/subject/ebpfvftx.html