CN107291474A - 一种前端工程自动化构建系统 - Google Patents

Abstract

本发明公开了一种前端工程自动化构建系统，包括获取单元，用于获取用户创建的工程，工程包括源代码目录和输出代码目录，源代码目录包括超级文本标记语言HTML文件；构建单元，用于构建源代码目录中的文件；注入单元，用于将构建后的文件拷贝到输出代码目录，并将构建后的相应文件引用注入到HTML文件中。本发明在获取到用户创建的工程后能够实现对工程自动进行构建，不仅避免了人工方式容易出错的问题，还提高了工作效率；另外，本发明还适用于对多个工程并行开发，在单个工程出问题的情况下，不影响其他工程，大大的提高了工程开发管理的效率。

Description

一种前端工程自动化构建系统

技术领域

本发明涉及前端开发领域，特别是涉及一种前端工程自动化构建系统。

背景技术

随着前端技术的发展，前端代码的逻辑和交互效果越来越复杂，需要对前端工程中的代码进行构建，从而实现工程的开发管理，进而向用户展示丰富的前端界面。现有技术是通过人工的方式来实现工程的开发管理，人为的对工程进行构建，但是人工的方式容易出错，而且工作效率低下。

因此，如何提供一种解决上述技术问题的方案是本领域技术人员目前需要解决的问题。

发明内容

本发明的目的是提供一种前端工程自动化构建系统，在获取到用户创建的工程后能够实现对工程自动进行构建，不仅避免了人工方式容易出错的问题，还提高了工作效率；另外，本发明还适用于对多个工程并行开发，在单个工程出问题的情况下，不影响其他工程，大大的提高了工程开发管理的效率。

为解决上述技术问题，本发明提供了一种前端工程自动化构建系统，包括：

获取单元，用于获取用户创建的工程，所述工程包括源代码目录和输出代码目录，所述源代码目录包括超级文本标记语言HTML文件；

构建单元，用于构建所述源代码目录中的文件；

注入单元，用于将构建后的文件拷贝到所述输出代码目录，并将构建后的相应文件引用注入到所述HTML文件中。

优选地，所述源代码目录中的文件包括JavaScript文件、层叠样式表CSS文件及图片文件；则所述构建单元具体包括：

JavaScript文件构建单元，用于合并所述JavaScript文件，并为其添加版本号；

CSS文件构建单元，用于编译所述CSS文件，并为其添加版本号；

图片构建单元，用于为所述图片文件添加版本号。

优选的，在合并所述JavaScript文件之后，为其添加版本号之前，所述JavaScript文件构建单元还用于压缩所述JavaScript文件。

优选的，在编译所述CSS文件之后，为其添加版本号之前，所述CSS文件构建单元还用于压缩所述CSS文件。

优选的，所述构建单元为自动化构建工具Gulp。

优选的，所述构建单元为自动化构建工具Grunt。

优选的，当所述工程为多个且各个所述工程中的源代码目录中的文件构建完成后，所述将构建后的相应文件引用注入到所述HTML文件中之前，所述注入单元还用于拷贝各个所述工程的输出代码目录中的代码，将其合并到一个目录中。

优选的，所述工程还包括测试代码目录，所述源代码目录中的文件包括JavaScript文件、CSS文件及图片文件，则：

所述构建单元包括CSS文件构建单元，用于编译所述CSS文件；

所述注入单元还用于将所述JavaScript文件、所述图片文件及编译后的所述CSS文件拷贝到所述输出代码目录，并将所述JavaScript文件及编译后的所述CSS文件引用注入到所述HTML文件中；还用于将所述测试代码目录中的代码注入到所述HTML文件中；

监听单元，用于在启动本地服务后，开启源代码和测试代码监听，若所述源代码和/或所述测试代码变动时，将变动代码拷贝到所述输出代码目录中，并重启本地服务。

本发明提供了一种前端工程自动化构建系统，包括获取单元，用于获取用户创建的工程，工程包括源代码目录和输出代码目录，源代码目录包括超级文本标记语言HTML文件；构建单元，用于构建源代码目录中的文件；注入单元，用于将构建后的文件拷贝到输出代码目录，并将构建后的相应文件引用注入到HTML文件中。

可见，本发明在获取到用户创建的工程后能够实现对工程自动进行构建，不仅避免了人工方式容易出错的问题，还提高了工作效率；另外，本发明还适用于对多个工程并行开发，在单个工程出问题的情况下，不影响其他工程，大大的提高了工程开发管理的效率。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对现有技术和实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明提供的一种前端工程自动化构建系统的结构示意图；

图2为本发明提供的另一种前端工程自动化构建系统的结构示意图。

具体实施方式

本发明的核心是提供一种前端工程自动化构建系统，在获取到用户创建的工程后能够实现对工程自动进行构建，不仅避免了人工方式容易出错的问题，还提高了工作效率；另外，本发明还适用于对多个工程并行开发，在单个工程出问题的情况下，不影响其他工程，大大的提高了工程开发管理的效率。

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，图1为本发明提供的一种前端工程自动化构建系统的结构示意图，包括：

获取单元1，用于获取用户创建的工程，工程包括源代码目录和输出代码目录，源代码目录包括超级文本标记语言HTML文件；

在实际应用中，本发明提供的前端工程自动化构建系统运行在Node.js中，Node.js是一个基于Chrome JavaScript建立的平台。用户在Node.js中创建工程后，获取单元1将获取用户创建的工程，工程包括源代码目录和输出代码目录，源代码目录中存放着各个文件的源代码，输出代码目录中存放着各个文件经过构建后的代码，其中，源代码目录中包括HTML(HyperText Markup Language，超级文本标记语言)文件，HTML文件能够提供网页的信息以及网页的具体内容，结合其他的文件能够创造出丰富的前端界面。

构建单元2，用于构建源代码目录中的文件；

源代码目录中除了HTML文件外，还包含其他的文件，构建单元2根据源代码目录中包含的文件设置有相应的子构建单元，对源代码目录中的文件进行相应的构建操作，从而完成对工程中代码的编译以及其它相关的操作。具体的，以构建单元2中的CSS(CascadingStyle Sheets，层叠样式表)文件构建单元为例，CSS文件构建单元编译源代码目录中CSS文件的代码，并为CSS文件添加版本号，完成对工程源代码目录中CSS文件的代码的编译以及CSS文件版本号的添加。在实际应用中，构建单元2可以应用于产品交付的构建，还可以应用于产品开发的构建，这里不做限定。

注入单元3，用于将构建后的文件拷贝到输出代码目录，并将构建后的相应文件引用注入到HTML文件中。

具体的，构建后的文件可以包括JavaScript文件、CSS文件及图片文件，其中，JavaScript是一种直译式脚本语言，用于为HTML网页增加动态功能，CSS是一种用来表现HTML或者XML(Extensible Markup Language，可扩展标记语言)文件样式的计算机语言，用于修饰HTML网页。注入单元3将构建后的文件拷贝到输出代码目录，完成对工程中代码的拷贝；注入单元3将构建后的JavaScript文件和CSS文件引用注入到HTML文件中，完成对工程中代码的引用。

另外，获取单元1在获取到用户创建的工程后，构建单元2和注入单元3会自动进行相应操作，从而实现工程的自动构建。

可见，本发明在获取到用户创建的工程后能够实现对工程自动进行构建，不仅避免了人工方式容易出错的问题，还提高了工作效率；另外，本发明还适用于对多个工程并行开发，在单个工程出问题的情况下，不影响其他工程，大大的提高了工程开发管理的效率。

作为一种优选的实施例，源代码目录中的文件包括JavaScript文件、层叠样式表CSS文件及图片文件；则构建单元具体包括：

JavaScript文件构建单元，用于合并JavaScript文件，并为其添加版本号；

CSS文件构建单元，用于编译CSS文件，并为其添加版本号；

图片构建单元，用于为图片文件添加版本号。

具体的，合并JavaScript文件能够减少网页HTTP(HyperText TransferProtocol，超文本传输协议)的请求次数，提高网页的打开速度；编译CSS文件不仅能够检查CSS文件中的代码是否出错，还能够将CSS文件中的源代码翻译成前端网页所需的目标代码；为源代码目录中的各个文件添加版本号是为了区别不同的版本，方便后期维护管理。另外，源代码目录中的文件除了可以包括上述文件外，还可以包括音频文件和/或视频文件，这里不做限定。

作为一种优选的实施例，在合并JavaScript文件之后，为其添加版本号之前，JavaScript文件构建单元还用于压缩JavaScript文件。

作为一种优选的实施例，在编译CSS文件之后，为其添加版本号之前，CSS文件构建单元还用于压缩CSS文件。

具体的，压缩JavaScript文件和CSS文件能够减少代码的占用空间，有利于代码的传输，增强了代码的加密性，提高了网页的加载速度。

作为一种优选的实施例，构建单元为自动化构建工具Gulp。

作为一种优选的实施例，构建单元为自动化构建工具Grunt。

具体的，Gulp和Grunt均是前端自动化构建工具，能够自动完成对工程的代码的编译、拷贝、引用的工作。其中，Gulp具有简洁易用、易于配置的特点，Grunt具有功能完善、使用高效的特点。

作为一种优选的实施例，当工程为多个且各个工程中的源代码目录中的文件构建完成后，将构建后的相应文件引用注入到HTML文件中之前，注入单元还用于拷贝各个工程的输出代码目录中的代码，将其合并到一个目录中。

在实际应用中，一个大的工程可以拆分成多个子工程进行开发管理，各个子工程之间是相互独立、互不影响的，各个子工程的源代码目录中的文件构建完成后，注入单元拷贝各个子工程的输出代码目录中的代码，并将其合并到一个目录中，完成子工程的集成，从而到达工程并行开发的目的。

作为一种优选的实施例，如图2所示，图2为本发明提供的另一种前端工程自动化构建系统的结构示意图，工程还包括测试代码目录，源代码目录中的文件包括JavaScript文件、CSS文件及图片文件；则：

构建单元2包括CSS文件构建单元，用于编译CSS文件；

注入单元3还用于将JavaScript文件、图片文件及编译后的CSS文件拷贝到输出代码目录，并将JavaScript文件及编译后的CSS文件引用注入到HTML文件中；还用于将测试代码目录中的代码注入到HTML文件中；

监听单元4，用于在启动本地服务后，开启源代码和测试代码监听，若源代码和/或测试代码变动时，将变动代码拷贝到输出代码目录中，并重启本地服务。

在对产品开发构建时，工程还包括测试代码目录，需要将测试代码目录中的代码注入到HTML文件中。为了简洁快速的对工程进行测试，构建单元2只编译源代码目录中的CSS文件，注入单元3将JavaScript文件、图片文件及编译后的CSS文件拷贝到输出代码目录，将JavaScript文件及编译后的CSS文件引用注入到HTML文件中，完成对工程中代码的编译、拷贝及引用。启动本地服务后，对源代码和测试代码进行监听，当两者中任一个或者两者都有变化时，将变动的代码拷贝到输出代码目录中，并重启本地服务，能够在前端界面中直观的看到变动的代码产生的效果。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其他实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (8)

1.一种前端工程自动化构建系统，其特征在于，包括：

获取单元，用于获取用户创建的工程，所述工程包括源代码目录和输出代码目录，所述源代码目录包括超级文本标记语言HTML文件；

构建单元，用于构建所述源代码目录中的文件；

注入单元，用于将构建后的文件拷贝到所述输出代码目录，并将构建后的相应文件引用注入到所述HTML文件中。

2.根据权利要求1所述的系统，其特征在于，所述源代码目录中的文件包括JavaScript文件、层叠样式表CSS文件及图片文件；则所述构建单元具体包括：

JavaScript文件构建单元，用于合并所述JavaScript文件，并为其添加版本号；

CSS文件构建单元，用于编译所述CSS文件，并为其添加版本号；

图片构建单元，用于为所述图片文件添加版本号。

3.根据权利要求2所述的系统，其特征在于，在合并所述JavaScript文件之后，为其添加版本号之前，所述JavaScript文件构建单元还用于压缩所述JavaScript文件。

4.根据权利要求2所述的系统，其特征在于，在编译所述CSS文件之后，为其添加版本号之前，所述CSS文件构建单元还用于压缩所述CSS文件。

5.根据权利要求1-4任一项所述的系统，其特征在于，所述构建单元为自动化构建工具Gulp。

6.根据权利要求1-4任一项所述的系统，其特征在于，所述构建单元为自动化构建工具Grunt。

7.根据权利要求5所述的系统，其特征在于，当所述工程为多个且各个所述工程中的源代码目录中的文件构建完成后，所述将构建后的相应文件引用注入到所述HTML文件中之前，所述注入单元还用于拷贝各个所述工程的输出代码目录中的代码，将其合并到一个目录中。

8.根据权利要求1所述的系统，其特征在于，所述工程还包括测试代码目录，所述源代码目录中的文件包括JavaScript文件、CSS文件及图片文件；则：

所述构建单元包括CSS文件构建单元，用于编译所述CSS文件；

所述注入单元还用于将所述JavaScript文件、所述图片文件及编译后的所述CSS文件拷贝到所述输出代码目录，并将所述JavaScript文件及编译后的所述CSS文件引用注入到所述HTML文件中；还用于将所述测试代码目录中的代码注入到所述HTML文件中；

监听单元，用于在启动本地服务后，开启源代码和测试代码监听，若所述源代码和/或所述测试代码变动时，将变动代码拷贝到所述输出代码目录中，并重启本地服务。