首页 > 其他分享 >任务配置详解—grunt入门指南

任务配置详解—grunt入门指南

时间:2023-06-04 18:01:05浏览次数:33  
标签:src grunt bar 入门 js 任务 详解 foo

任务配置指的是grunt.initConfig({})中的任务配置,上一篇文章我们配置了uglify(这里指任务名,而不是插件名)任务,用于压缩js文件,接单演示了任务配置的功能。


这一篇教程将深入讲解任务配置的细节。


多任务目标

构建中有二个关键字:任务(task)和目标(target),一个任务可以包含多个任务目标。

grunt.initConfig({
     //任务:合并文件
     concat: {
         //目标:构建“foo”
         foo: {
 
         },
         //目标:构建“bar”
         bar: {
 
         }
     },
     //任务:压缩文件
     uglify: {
         //目标:压缩“bar”目标指定的文件
         bar: {
 
         }
     }
});

你可以只调用任务中一个目标的执行:


grunt.registerTask( 'default' , [ 'uglify:bar' ]);

格式是任务名:目标名


非任务属性

在initConfig()的参数对象中的属性并非都是任务或目标,比如:

grunt.initConfig({
     pkg: {author: "minghe" ,email: "minghe@[email protected]" },
     //任务:压缩文件
     uglify: {
         //目标:压缩“bar”目标指定的文件
         bar: {
             options: {
                 banner: '/*! <%= pkg.author %>'
             }
         }
     }
});

这里的pkg其实是构建配置,在任务中可以使用类似pkg.author这样的形式获取值。


Options

大部分的任务都带有options配置属性,用于配置插件的参数,比如常见的banner属性,向构建后文件头打印自定义信息。


以uglify为例(uglify足够典型而且配置参数很丰富)

uglify: {
     bar: {
         options: {
             banner: '/*! <%= pkg.author %>*/' ,
             //添加文字到压缩后的文件尾部
             footer: '/*! 这是压缩文件尾部 */' ,
             //美化代码
             beautify: {
                 //中文ascii化,非常有用!防止中文乱码的神配置
                 ascii_only: true
             }
 
         }
     }
}

还有其他有意思的配置,留到下期演示。


Files

大部分的任务目标都是处理文件(watch也算是吧),所以文件的配置是任务目标的核心。


共有二种配置files的方式:

uglify: {
     build: {
         //源文件
         src: 'src/hello-grunt.js' ,
         //目标文件
         dest: 'build/hello-grunt-min.js'
     }
}

还有一种:

uglify: {
    files: {
         'build/hello-grunt-min.js' : [ 'src/hello-grunt.js' ]
    }
}

明河推荐大家使用第二种方式,更为简洁直观。


files还支持额外的配置属性(需要额外配置属性时只能使用第一种配置方式。)比如下面的代码:


grunt.initConfig({
   concat: {
     bar: {
       files: [
         {src: [ 'src/bb1.js' , 'src/bbb1.js' ], dest: 'dest/b1/' , filter: 'isFile' },
       ],
     },
   },
});

filter:过滤器(函数),函数参数为files的src,return true时才会构建该文件。


filter函数可以自定义:


grunt.initConfig({
   clean: {
     foo: {
       src: [ 'tmp/**/*' ],
       filter: function (filepath) {
         return grunt.file.isDir(filepath);
       },
     },
   },
});

grunt.file.isDir()判断filepath是否是目录。


文件的简单正则匹配语法

文件名(目录路径)的匹配,基本上和ant一样。


* 匹配除了/外的任意数量的字符,比如foo/*.js

? 匹配除了/外的单个字符

** 匹配包含/的任意数量的字符,比如foo/**/*.js

! 排除指定文件,比如src: ['foo/*.js', '!foo/bar.js']

{} 可以理解为“or”表达式,比如src: 'foo/{a,b}*.js'

用法举例:

//匹配foo目录下所有th开头的js文件
{src: 'foo/th*.js' , dest: ...}
 
//等价于{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}
{src: 'foo/{a,b}*.js' , dest: ...}
 
//优先处理bar.js,然后再处理其他文件
{src: [ 'foo/bar.js' , 'foo/*.js' ], dest: ...}
 
//排除处理foo/bar.js文件
src: [ 'foo/*.js' , '!foo/bar.js' ], dest: ...}


标签:src,grunt,bar,入门,js,任务,详解,foo
From: https://blog.51cto.com/u_16120380/6411537

相关文章

  • 3. 核心配置文件详解
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEconfigurationPUBLIC"-//mybatis.org//DTDConfig3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd"><configuration><p......
  • 3. 核心配置文件详解
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEconfigurationPUBLIC"-//mybatis.org//DTDConfig3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd"><configuration><p......
  • Spring MVC文件上传 文件上传解析 Spring MVC文件上传详解
    首先我要说的是springmvc的核心控制器DispachServlet,这个控制器主要是用来起调度作用,他里面默认就带了一个文件上传的视图解析器,叫multipartResolver,而这个视图解析器SpringMVC又提供了一个默认的实现,叫CommonMultipartResolver,说白了这个实现底层用的就是common-fileupload,......
  • WPF入门教程系列二十七 ——DataGrid使用示例MVVM模式(4)
    WPF入门教程系列目录WPF入门教程系列二——Application介绍WPF入门教程系列三——Application介绍(续)WPF入门教程系列四——Dispatcher介绍WPF入门教程系列五——Window介绍WPF入门教程系列十一——依赖属性(一)WPF入门教程系列十五——WPF中的数据绑定(一)   ......
  • .net 温故知新【11】:Asp.Net Core WebAPI 入门使用及介绍
    在Asp.NetCore上面由于现在前后端分离已经是趋势,所以asp.netcoreMVC用的没有那么多,主要以WebApi作为学习目标。一、创建一个WebApi项目我使用的是VS2022,.Net7版本。在创建界面有几项配置:配置Https启用Docker使用控制器启用OpenAPI支持不使用顶级语句其中配置Ht......
  • Kubescape入门
    Kubescape是一个K8sopen-source工具,提供multi-cloudK8s单层玻璃,包括风险分析、安全合规性、RBAC可视化工具和图像漏洞扫描。Kubescape在CI/CD管道的早期阶段扫描K8s集群、YAML文件和HELM图表,根据多个框架(例如NSA-CISA、MITREATT&CK®)、软件漏洞和RBAC(role-based-access-control)......
  • CXF入门教程(2) -- 第一个客户端
    文中对应的代码已经上传,与教程(1)中的service相对应。为调试方便,将service和client都放在了同一个工程中,不过是在不同的包中;本文对应的两个基本客户端在com.neareast.test.cxf.client.consumer包中,服务端ServiceTest类在com.neareast.test.cxf.server.service包中。代码地址如下:最常......
  • jQuery队列控制方法详解queue()/dequeue()/clearQueue()
    jQuery遍历-jQuery.queue()方法:[url]http://www.w3school.com.cn/jquery/data_jquery_queue.asp[/url]jQuery核心中,有一组队列控制方法,这组方法由queue()/dequeue()/clearQueue()三个方法组成,它对需要连续按序执行的函数的控制可以说是简明自如,......
  • JBPM5入门资料
    [color=darkblue][b]jBPM5.4-01:jbpm-5.4.0安装[/b][/color][url]http://xujava.iteye.com/blog/1839918[/url][color=red][b]jbpm5创建SimpleDemo步骤[/b][/color]:[url]http://wenku.baidu.com/view/dccf328e84868762caaed5b8.html[/url][color=red][b]J......
  • Service的入门教程
    [b][color=red]Webservice是什么[/color][/b][url]http://www.ruanyifeng.com/blog/2009/08/what_is_web_service.html[/url]生成客户端Java代码的两个命令:会保留service的package结构[color=red]wsdl2java-dd:\src-clienthttp://localhost:8080/Ser......