Grunt入门教程之二 —— concat插件

Grunt入门教程之二

Concat插件

concat是grunt中用来做文件连接的常用插件,比如说你写了一个类库,有三大模块,如:

a.js

b.js

c.js

当你的项目准备发布的时候,你可能需要将这三个模块合并成一个大的模块all.js,这样做可以减少HTTP请求,增快页面的响应速度。

如果我们每次发布的时候又要连接这三个模块,并测试all.js,确保大模块无BUG之后再发布,就显得很蛋疼了。一种好的方式是,每当你修改了其中一个小模块,他都会自动连接成all.js,并且你的项目在开发的时候也是引用all.js,

那就可以避免上面的问题了。

这个时候我们就需要一个自动连接js文件的自动化工具,基于grunt的话,那就是concat插件了。

下面介绍一下使用concat的几种形式

1.多个文件合并成一个文件

grunt.initConfig({
  concat: {
    options: {
      separator: ‘;‘,
      stripBanners: true,
      banner: ‘/*! hello - v1.2.3 - 2014-2-4 */‘
    },
    dist: {
      src: [‘a.js‘, ‘b.js‘, ‘c.js‘],
      dest: ‘all.js‘,
    },
  },});

options中是一些选项,键值对方式,可以做一些简单的配置

separator 文件连接分隔符,表示连接的文件用指定的separator分割。

banner 出现在合并后的文件开头出现,一般做说明和注释用。

footer 出现在合并后的文件底部出现,一般做说明和注释用。

stripBanners 如果为true,去除代码中的块注释,默认为false

process  如果为true,则在合并前先执行。

src是一个数组,里面的元素是你要合并的文件,按0-n的顺序进行合并。(注意你要合并的顺序)

dest是你生成合并文件的目录和文件名。

2.多个合并任务

grunt.initConfig({
  concat: {
    one: {
      src: [‘a.js‘],
      dest: ‘all.js‘,
    },
    two: {
      src: [‘b.js‘, ‘c.js‘],
      dest: ‘all-sec.js‘,
    },
  },});

这里分别定义了两个合并任务,one和two,分别生成两个合并文件

grunt concat:one 执行第一个任务, grunt concat:two 执行第二个,如果只是  grunt concat,则两个任务都会执行。

下面是另一种写法,效果同上

grunt.initConfig({
  concat: {
    basic_and_extras: {
      files: {
        ‘all.js‘: [‘a.js‘],
        ‘all-sec‘: [‘b.js‘, ‘c.js‘],
      },
    },
  },});

3.动态的文件名

grunt.initConfig({
  pkg: grunt.file.readJSON(‘package.json‘),
  concat: {
    dist: {
      src: [‘a.js‘],
      dest: ‘dist/<%= pkg.name %>-<%= pkg.version %>.js‘,
    },
  },});

以上是concat插件最基本和常用的用法,如果还是不明白的话可以到concat的github主页去学习学习

https://github.com/gruntjs/grunt-contrib-concat

?看不明白的可以和我交流

时间: 2024-10-11 15:35:12

Grunt入门教程之二 —— concat插件的相关文章

Grunt入门教程之(三)

Grunt入门教程之三 Yuidoc插件 Yuidoc 是一个可以将代码注释生成HTML格式文档的工具,文档的生成完全基于JavaDoc风格的代码注释规则. 我们在写公共模块或者API的时候,往往会输出文档给调用者查看,这时候Yuidoc就是一个很好的助手. 下面介绍一下如何在Grunt中使用Yuidoc. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 grunt.initConfig({ pkg: grunt.file.readJSON('package.jso

Docker入门教程(二)命令

Docker入门教程(二)命令 [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第二篇,介绍了Docker的基本命令以及命令的用法和功能. 在Docker系列教程的第一篇文章中,我们了解了Docker的基础知识,知道了它是如何工作以及如何安装的.在这篇文章中,我们将学习15个Docker命令,并通过实践来学习它是如何工作的. 首先,让我们通过下面的命令来检查Docker的安装是否正确: docker info  如果没有找到这条命令,则表示Docke

WCF入门教程(二)从零做起

通过最基本的操作看到最简单的WCF如何实现的.这是VS的SDK默认创建的样本 1.创建WCF服务库 2.看其生成结构 1)IService1.cs(协议) 定义了协议,具体什么操作,操作的参数和返回值等信息 通过ServiceContract.OperationContract.DataContract.DataMember等属性参数,将服务.操作.数据结构定义清楚. 在这里我们还清晰看到,WCF服务传输数据类型不只是通用数据类型,而且还可以传输自定义的复杂类型.哪些字段要进行传输,都可以通过D

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProperty)只能拥有一个binding. 这一点可以通过设置binding对象的方法名得知: public static BindingExpressionBase SetBinding( DependencyObject target, DependencyProperty dp, BindingB

WPF入门教程系列二——Application介绍

原文:WPF入门教程系列二--Application介绍 一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只有一个 Application 实例存在.和 WinForm 不同的是WPF Application默认由两部分组成 : App.xaml 和 App.xaml.cs,这有点类似于 Asp.Net WebForm,将定义和行为代码相分离. 微

Photoshop入门教程(二):暂存盘设置与标尺设置

新建文档之后大家就可以对图像进行编辑.在对图像进行编辑之前,先来了解一下如何查看图像的一些基本信息.在软件左下角,会有这样的信息显示窗口. 1窗口表示当前图像显示比例,200%代表当前为放大两倍显示.左键双击可修改显示比例. 2窗口显示当前文档所占空间,鼠标放到图示位置按住左键不放,出现3窗口,显示当前图像信息. 暂存盘设置 Photoshop暂存盘默认情况下是在C盘,但是C盘作为系统盘空间有限,当处理大型文档时,C盘空间就会不够用.同时系统响应速度也会下降.那么如何修改暂存盘? 菜单栏:编辑—

Node.js 入门教程 (二):模块

由于新工作要做前端,作为前端小白而且能尽快学习,所以选择慕课网的node.js的入门教程.博客只做自己学习的记录. JavaScript缺少模块管理机制,容易出现变量被覆盖,方法被替代的情况(既被污染).特别是存在依赖关系时,容易出现错误.采用命名空间的方式,把变量和函数限制在某个特定的作用域内,人肉约定一套命名规范来限制代码,保证代码安全运行. CommonJs是一套规范,包括了modules,system,encodings,unit test等等来约定JavaScript应该怎么去组织和编

Spring MVC入门教程(二)

第一篇文章宏观讲了Spring MVC概念,以及分享了一个快速入门的例子(文章链接). 这篇文章主要来谈谈Spring MVC的配置文件. 首先来谈谈web.xml: web项目启动时自动加载到内存中的信息,比如服务器配置参数,<listener>监听器,<filter>过滤器,<servlet>等.再如,如果在项目中使用了spring框架,则必须定义ContextLoaderListener,那么在启动Web容器时,会自动装配Spring applicationCon

WCF入门教程(二)从零做起-创建WCF服务

通过最基本的操作看到最简单的WCF如何实现的.这是VS的SDK默认创建的样本 1.创建WCF服务库 2.看其生成结构 1)IService1.cs(协议) 定义了协议,具体什么操作,操作的参数和返回值等信息 通过ServiceContract.OperationContract.DataContract.DataMember等属性参数,将服务.操作.数据结构定义清楚. 在这里我们还清晰看到,WCF服务传输数据类型不只是通用数据类型,而且还可以传输自定义的复杂类型.哪些字段要进行传输,都可以通过D