CN105893014A

CN105893014A - 用于前端的项目开发方法及系统

Info

Publication number: CN105893014A
Application number: CN201510896911.1A
Authority: CN
Inventors: 王文杰
Original assignee: LeTV Cloud Computing Co Ltd
Current assignee: LeTV Cloud Computing Co Ltd
Priority date: 2015-12-08
Filing date: 2015-12-08
Publication date: 2016-08-24

Abstract

本发明实施例提供了一种用于前端的项目开发方法及系统。其中，所述方法包括：建立网络服务和应用的运行平台；在所述运行平台上配置前端用户界面框架；为所述用户界面框架设置功能组件；为所述功能组件提供任务执行的工具集；将项目开发所需的至少部分数据导入所述前端用户界面框架，利用所述工具集对所述功能组件进行实时编译，生成前端页面。本实施方式可以将开发工具与开发项目进行分离，待首次配置成功后，就可以支持多项目灵活快速开发；通过部分数据就可以生成前端页面，而无需后端支持；通过实时编译刷新页面有效避免了待整体项目编写结束后再编译的错误过多的问题，以及避免了页面缓存带来的占用存储空间和影响数据运算速度的问题。

Description

用于前端的项目开发方法及系统

技术领域

本发明实施例涉及项目开发技术领域，尤其涉及一种用于前端的项目开发方法及系统。

背景技术

前端页面存在多种代码类型，可以包括HTML(Hypertext MarkupLanguage，超文本标记语言)、JS(JavaScript，网络脚本语言)、CSS(CascadingStyle Sheet，级联样式表)等代码类型。由于用于前端的项目的开发工作量较大，所以前端页面的开发人员编写的代码质量较差，从而影响后期的代码的测试效率。为了提高代码质量，可以由前端页面的开发人员先对前端页面进行自测试。目前，前端页面的自测试过程主要面临以下问题：

问题一、每启动一个新的前端的项目都要重新编写所有的代码，代码的重复开发性高，造成不必要的人力财力的浪费，并且项目开发效率低。有人试图利用国外的框架进行前端项目的开发，然而，那些框架不关注中文的字体和中文排版，与国内的主流浏览器不兼容，文件也会依赖冲突，产出的项目的质量不佳，且适用性不广，因此开发人员不使用此种方法。

问题二、在开发前端页面之前，前端页面的开发人员与后端的开发人员需要协商确定数据接口，根据该数据接口决定后端返回给前端页面的数据格式。在开发前端页面时，需要从后端获取后端数据。然而前端页面的开发与后端的开发是并行的，这会导致在开发前端页面时，缺少后端数据作为支持，从而无法生成前端页面，进而无法进行前端页面的自测试。只有在完成前端页面的开发后，才能进行前端页面的自测试。

问题三、由于前端页面与后端之间的数据接口十分复杂，每个数据接口都包括多个字段以及多种数据类型。因此前端页面与后端交互数据非常复杂，导致自测试效率较低。

因此，如何快速的开发前端的项目，如何提高前端项目的准确性，如何将前端的项目的开发与后端分离，如何将开发工具与开发项目分离，如何在不需要后端数据支持的情况下就可以生成前端页面等问题以成为业界的关注点之一。

发明内容

本发明实施例提供了一种用于前端的项目开发方法及系统，用以解决现有技术中开发前端的项目速度慢的问题。

本发明实施例提供了一种用于前端的项目开发方法。该方法包括：

建立网络服务和应用的运行平台；

在所述运行平台上配置前端用户界面框架；

为所述用户界面框架设置功能组件；

为所述功能组件提供任务执行的工具集；

将项目开发所需的至少部分数据导入所述前端用户界面框架，利用所述工具集对所述功能组件进行实时编译，生成前端页面。

本发明实施例还提供了一种用于前端的项目开发系统。该系统包括：

建立平台单元，用于建立网络服务和应用的运行平台；

配置框架单元，用于在所述运行平台上配置前端用户界面框架；

设置组件单元，用于为所述用户界面框架设置功能组件；

设置工具单元，用于为所述功能组件提供任务执行的工具集；

生成页面单元，用于将项目开发所需的至少部分数据导入所述前端用户界面框架，利用所述工具集对所述功能组件进行实时编译，生成前端页面。

本实施方式可以将开发工具与开发项目进行分离，首次配置成功后，就可以支持多项目灵活快速开发，大幅度提高了开发项目的速度；

进一步，本实施方式通过部分数据就可以生成前端页面，而无需后端支持；

本实施方式通过实时编译刷新页面有效避免了待整体项目编写结束后再编译的错误过多的问题，以及避免了页面缓存带来的占用存储空间和影响数据运算速度的问题；

本实施方式可以规范前端开发代码编制，提高了前端开发的准确性。

附图说明

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

图1为本发明一实施方式的用于前端的项目开发方法的流程示意图；

图2(a)为本发明一实施方式的用于前端的项目开发系统的结构示意图；

图2(b)为本发明另一实施方式的用于前端的项目开发系统的结构示意图；

图2(c)为本发明又一实施方式的用于前端的项目开发系统的结构示意图；

图3(a)为本发明一实施方式的工具集处理文件的示意图；

图3(b)为本发明一实施方式的工具集进行代码校验、测试和压缩的示意图。

具体实施方式

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

图1为本发明用于前端的项目开发方法的一个实施方式的流程示意图。如图1所示，用于前端的项目开发方法包括：

S101：建立网络服务和应用的运行平台。

S102：在运行平台上配置前端用户界面框架。

S103：为用户界面框架设置功能组件。

S104：为功能组件提供任务执行的工具集。

S105：将项目开发所需的至少部分数据导入所述前端用户界面框架，利用所述工具集对所述功能组件进行实时编译，生成前端页面。

在本实施方式中，所述运行平台为Node.js平台、所述工具集为Gulp工具集。

其中，运行平台可以是Node.js平台。Node.js平台是一个基于ChromeJavaScript运行时建立的平台，该平台用于方便地搭建响应速度快、易于扩展的网络应用。Node.js平台使用事件驱动、非阻塞I/O模型而使得该平台具有轻量和高效的特点，非常适合在分布式设备上对密集型的数据进行实时应用。Node是一个Javascript运行环境(例如runtime状态)。实际上它是对Google V8引擎进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。Node对一些特殊用例进行了优化，提供了替代的API(Application ProgrammingInterface,应用程序编程接口)，使得V8在非浏览器环境下运行得更好。Node.js是整套系统的底层发动机。

Gulp常被称为一个构建系统。发者可以使用Gulp在网站开发过程中自动执行常见任务。Gulp工具集可以包括用来执行文件合并(gulp-concat)、文本替换(gulp-replace)、文件拷贝(gulp-copy)、JS压缩(gulp-uglify)、CSS压缩(gulp-cssmin)、图片压缩(gulp-imagemin)等任务的工具。Gulp是基于Node.js构建的，因此Gulp源文件和拟用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里。前端开发工程师还可以用自己熟悉的语言(例如C语言或者JAVA语言)来编写任务去编译(例如利用lint编译工具)JavaScript和CSS、解析模板，以及在文件变动时编译Sass/Less文件(即实时编译Sass/Less文件)。另外，在Gulp基础上研发各种插件，供于前端整套系统更好的接地气。Gulp的作用非常重要，它是整套系统的中枢指挥官。

由此，利用Node.js平台和Gulp工具集可以实现非常强大的功能。例如，Gulp工具集通过配置丰富的组件和工具，可以支持pc、wap、ipad三端开发，并且这三端可以灵活切换，此外也可以实时根据pc、wap、ipad进行真机测试、调试页面，也可以支持非浏览器环境下的操作，大幅度的提高了工作效率。

在本实施方式中，在建立网络服务和应用的运行平台前：根据各个网络服务和应用的运行平台、各个用户界面框架、各个工具集的兼容性确定待选择的所述运行平台、所述用户界面框架、所述工具集。

由此，本实施方式通过版本控制有效的解决了多个文件版本引起的依赖冲突问题，提高了系统的稳定性，便于后期维护。

在本实施方式中，利用git版本控制系统确定版本适配的待选择的所述运行平台、所述用户界面框架、所述工具集。

由此，本实施方式通过git版本控制系统是免费、开源的分布式控制系统，可以快速、高效的处理各种项目的版本，通过拉取的方式选择各种版本的文件，操作简单、方便。

在本实施方式中，所述用户界面框架包括多个CSS组件、多个JS组件和多个包含不同主题的Web组件。

由此，本实施方式包括丰富的功能组件，可以实现强大的功能，方便了前端开发，提高了前端项目的开发质量。

在本实施方式中，前端用户界面框架可以是LeCloudUI。LeCloudUI是一个轻量级的前端UI框架，由乐视云计算前端组开发维护。LeCloudUI含近20个CSS组件、10余JS组件，更有多个包含不同主题的Web组件，可快速构建界面出色、体验优秀的前端页面，大幅提升开发效率。相比国外框架，LeCloudUI还关注中文排版，可以调整丰富的中文字体，可以实现更好的中文排版效果；另外，LeCloudUI与国内主流浏览器相兼容。LeCloudUI可以形象的称为开发系统的脸面。

下面举例说明LeCloudUI框架的结构，具体如下所示：

接着，举例说明基于LeCloudUI框架速构建一个页面的部分代码的实现方式，具体可以如下所示：

UI组件例如可以是：

(链接)Link

<button type＝″button″class＝″ui-btn ui-btn-default″>(默认样式)Default</button>

<button type＝″button″class＝″ui-btn ui-btn-primary″>(首选项)Primary</button>

<button type＝″button″class＝″ui-btn btn-success″>(成功)Success</button>

<button type＝″button″class＝″ui-btn ui-btn-warning″>(警告)Warning</button>

<button type＝″button″class＝″ui-btn ui-btn-danger″>(危险)Danger</button>

情景模板
	头部
我想我是个艺术家

头部
	我想我是个艺术家

头部
	我想我是个艺术家

头部
	我想我是个艺术家

头部
	我想我是个艺术家

分页-默认据中

下面举例详细说明用于前端的项目开发方法的具体实现方式：

第一步：Git拉取git@git.letv.cn：letvcloudued/leprojects.git项目基础。此步骤可以先阅读文档(使用须知)了解如何工作，具体“使用须知”可以如下：

便用须知：

请勿删除根目录下[.gitignore]、[readme.md]、[package.json]

本机电脑中确认已安装Node.js，同时执行了全局安装命令：

### 安装如下到全局

npm install-g gulp

还不会安装Node等，请看这里http：//www.imooc.com/video/5152

sass安装

sass安装请看这里http：//www.imooc.com/learn/311

Windows系统电脑用户：

由于windows系统在node上面很不稳定，新版本配置拉取会报很多错，

配置起来也很费劲，此时我们使用的是老版本的gulp+node+sass编译

(1)请将[fedautotool/gulpfile.babel.js](如果存在该文件)删除

(2)请将[tools/windows/gulpfile.js]、[tools/windows/package.json]复制到fedautotool根目录下[可文件覆盖]

(3)请将[tools/windows/node_modules.zip]解压后，将node_modules文件夹剪切到leprojects根目录下

Mac/Linux系统电脑用户：

(1)请将[fedautotool/gulpfile.js](如果存在该文件)删除

(2)请将[tools/mac/gulpfile.babel.js]、[tools/mac/package.json]复制到fedautotool根目录下[可文件覆盖]

(3)最后执行在该项目根目录下执行命令行拉取依赖：

### 拉取依赖node_modules

npm install--save--dev

项目命令启动/构建：

### 启动serve-pc

gulp serve-pc

### 启动serve-wap

gulp serve-wap

### 构建产出build-pc

gulp build-pc

### 构建产出build-wap

gulp build-wap

下面利用部分代码介绍gulpfile.babel.js整套系统中gulp执行任务的具体实施方式，具体描述如下：

第二步、新建子项目用于新项目开发。例如新建letvcloud项目，具体letvcloud项目的目录可以如下所示：

参照上述新建letvcloud项目，在其下就会看到app开发环境目录，此时app开发环境目录下可以根据选择pc或者wap端项目，以wap端为例，wap目录下有css、fonts、images、js、tpl等基础文件目录。

第三步、项目开发。

待网页切图完成后，将图片素材放入images文件夹。此时在tpl目录下新建home.html用于网站主页的开发。home.html页面中引用的html、js、css均可以采用有效分离原则，这样可以减少重复工作等。

本实施方式中项目开发的代码实现方式例如可以是：

Home.html

css方面根据需要选择性引入组件，同时也可以写入自身css，例如base.scss的代码实现方式例如可以是：

第四步、开发环境下开启服务查看页面效果，监听保存实时编译刷新。

第五步、项目开发完成产出移交技术。

其中，开发环境的代码例如可以是：

其中，产出环境的代码例如可以是：

由此，本实施方式可以产生如下的有益效果：

快速构建开发：本前端构建开发工具与开发项目有效地分离，首次配置成功后，可以支持多项目灵活快速开发，有效地减少新项目的准备工作，短时间快速进入新项目开发中去。

支持多端开发：本前端构建开发工具支持pc、wap、ipad三端开发并存，并且可以灵活切换，同时也可以根据pc、wap、ipad进行实时真机测试、调试页面，很大程度上帮助web前端工程师更快地定位问题。

实时编译刷新：传统的web开发效率慢不说，每次保存改动后都需要手动刷新页面检查页面效果，而本前端构建开发工具实时监测，一旦有文件变更实时编译后台自动刷新浏览器以最新状态展示，同时也有效地避免了页面缓存问题。

版本控制：采用git可以有效地解决团队开发中版本冲突的问题。

图2(a)为本发明用于前端的项目开发系统的结构示意图。如图2(a)所示，用于前端的项目开发系统可以包括：建立平台单元、配置框架单元、设置组件单元、设置工具单元和生成页面单元。其中：

建立平台单元用于建立网络服务和应用的运行平台。

配置框架单元用于在所述运行平台上配置前端用户界面框架。

设置组件单元用于为所述用户界面框架设置功能组件。

设置工具单元用于为所述功能组件提供任务执行的工具集。

生成页面单元用于将项目开发所需的至少部分数据导入所述前端用户界面框架，利用所述工具集对所述功能组件进行实时编译，生成前端页面。

图2(b)为本发明另一实施方式的用于前端的项目开发系统的结构示意图。本实施方式基于图2(a)实施方式变化而来，在此仅描述这两个实施方式的不同之处，二者相同之处不再赘述。

如2(b)所示，本实施方式基于图2(a)实施方式增加了兼容控制单元。兼容控制单元配置为根据各个网络服务和应用的运行平台、各个用户界面框架、各个工具集的兼容性确定待选择的所述运行平台、所述用户界面框架、所述工具集。

在本实施方式中，所述兼容控制单元包括git版本控制系统，所述git版本控制系统用于确定版本适配的待选择的所述运行平台、所述用户界面框架、所述工具集。

由此，本实施方式通过git版本控制系统是免费、开源的分布式控制系统，可以快速、高效的处理各种项目的版本，通过在列表框内拉取的方式选择各种版本的文件，操作简单、方便。本领域的技术人员可以理解兼容控制单元还可以按需求通过其它软件方式或者查询修改的方式实现(例如，在表单上记录各软件版本，查询相冲突的软件版本，删除或者修改互相冲突的软件版本)。

图2(c)为本发明又一实施方式的用于前端的项目开发系统的结构示意图。如图2(c)所示，用于前端的项目开发系统包括：存储器和处理器。其中：存储器用于存储有执行程序。处理器，用于执行所述执行程序，以用于:建立网络服务和应用的运行平台；在所述运行平台上配置前端用户界面框架；为所述用户界面框架设置功能组件；为所述功能组件提供任务执行的工具集；将项目开发所需的至少部分数据导入所述前端用户界面框架，利用所述工具集对所述功能组件进行实时编译，生成前端页面。

在上述的多个实施方式中，所述运行平台可以为Node.js平台、所述工具集可以为Gulp工具集。

由此，利用Node.js平台和Gulp工具集可以实现非常强大的功能。例如，Gulp工具集通过配置丰富的组件和工具，可以支持pc、wap、ipad三端开发，并且这三端可以灵活切换。此外也可以根据pc、wap、ipad进行实时真机测试、调试页面，大幅度的提高了工作效率。

在上述的多个实施方式中，用户界面框架可以包括多个CSS组件、多个JS组件和多个包含不同主题的Web组件。

图3(a)为本发明一实施方式的工具集处理文件的示意图。如图3(a)所示，本实施例中，系统内的Gulp工具集可以先读取文件(Read files)，接着依次经过代码质量检查工具(例如JSHint)、组件合并优化工具(例如Minify)、连接数组工具(Concat)、写文件(Write files)对文件进行相应操作。

图3(b)为本发明一实施方式的工具集进行代码校验、测试和压缩的示意图。如图3(b)所示，系统内的组件(例如生成器)可以自由进行代码校验、测试和压缩等操作。本领域的技术人员可以理解，可以按需求选取不同的工具，以及对各个工具进行不同组合以实现个性化的操作需求。

本发明实施例中可以通过硬件处理器(hardware processor)来实现相关功能，本领域技术人员可以理解也可以通过各单元来实现相关功能模块的各项功能。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims

1.一种用于前端的项目开发方法，包括：

建立网络服务和应用的运行平台；

在所述运行平台上配置前端用户界面框架；

为所述用户界面框架设置功能组件；

为所述功能组件提供任务执行的工具集；

2.根据权利要求1所述的方法，其中，所述运行平台为Node.js平台、所述工具集为Gulp工具集。

3.根据权利要求1所述的方法，其中，在建立网络服务和应用的运行平台前：根据各个网络服务和应用的运行平台、各个用户界面框架、各个工具集的兼容性确定待选择的所述运行平台、所述用户界面框架、所述工具集。

4.根据权利要求3所述的方法，其中，利用git版本控制系统确定版本适配的待选择的所述运行平台、所述用户界面框架、所述工具集。

5.根据权利要求1-4中任一项所述的方法，所述用户界面框架包括多个CSS组件、多个JS组件和多个包含不同主题的Web组件。

6.一种用于前端的项目开发系统，包括：

建立平台单元，用于建立网络服务和应用的运行平台；

设置组件单元，用于为所述用户界面框架设置功能组件；

7.根据权利要求6所述的系统，其中，所述运行平台为Node.js平台、所述工具集为Gulp工具集。

8.根据权利要求6所述的系统，还包括：

兼容控制单元，用于为根据各个网络服务和应用的运行平台、各个用户界面框架、各个工具集的兼容性确定待选择的所述运行平台、所述用户界面框架、所述工具集。

9.根据权利要求8所述的系统，其中，所述兼容控制单元包括git版本控制系统，所述git版本控制系统用于确定版本适配的待选择的所述运行平台、所述用户界面框架、所述工具集。

10.根据权利要求6-9中任一项所述的系统，所述用户界面框架包括多个CSS组件、多个JS组件和多个包含不同主题的Web组件。