[发明专利]基于nodejs的静态页面开发脚手架方法

说明书

一种基于nodejs的静态页面开发脚手架方法，包括以下步骤：（Ⅰ）开发流程，先安装nodejs，gulp和express，再用gulp构建任务监控所有静态资源、js、sass和html的变化，自动进行编译任务，然后用express作为web服务器启动web服务，配置前端开发服务器的路由，使用arttemplate模板搭建页面；（Ⅱ）打包流程，用gulp构建任务完成前端打包。本发明可以把复杂样式的代码用sass语法来书写，并自动编译成浏览器识别的css，对多个css或者js压缩提高性能，使用模板开发，模块化管理html文件，添加哈希值用于更新js文件和css文件的版本。

技术领域

本发明涉及页面开发方法的技术领域，特别涉及基于nodejs的静态页面开发脚手架方法。

背景技术

现在前端技术的发展，让前端开发不仅仅局限于静态网页的开发，前端代码逻辑也日催复杂，不方便管理，要是按照以前的开发，会导致开发工作量大，优化麻烦，发布困难等问题。Nodejs的发布是服务器前端可以引入自动化构建来进行开发，解决开发工作量大，优化麻烦和发布困难的问题。

发明内容

本发明是为了克服现有技术中存在的缺点而提出的，其目的是提供基于nodejs的静态页面开发脚手架方法。

本发明的技术方案是：

一种基于nodejs的静态页面开发脚手架方法，包括以下步骤：

（Ⅰ）开发流程

先安装nodejs，gulp和express，再用gulp构建任务监控所有静态资源、js、sass和html的变化，自动进行编译任务，然后用express作为web服务器启动web服务，配置前端开发服务器的路由，使用arttemplate模板搭建页面；

（Ⅱ）打包流程

用gulp构建任务完成前端打包。

所述步骤（Ⅰ）开发流程中用gulp构建任务监控所有静态资源、js、css、sass和html变化的具体步骤为：

（ⅰ）监控所有静态资源，将其自动生成到输出目录中；

（ⅱ）监控所有js文件，自动压缩并生成到输出目录中；

（ⅲ）监控所有sass文件，自动压缩并转换成浏览器识别的css文件并生成到输出目录中；

（ⅳ）监控所有html文件，自动生成到输出目录中。

所述步骤（Ⅱ）打包流程的具体步骤为：

（ⅰ）清除输出目录路径下的所有文件；

（ⅱ）删除输出目录路径的httl文件，生成html文件，并进行压缩处理；

（ⅲ）压缩css文件，并将压缩的css文件生成到输出目录中；

（ⅳ）压缩js文件，并将压缩的js文件生成到输出目录中；

（ⅴ）注入项目的配置路径，包括服务器路径、资源路径和模板路径；

（ⅵ）将输出目录中的html文件转换为httl文件；

（ⅶ）删除打包过程中产生的js文件与css文件。

本发明的有益效果是：

本发明可以把复杂样式的代码用sass语法来书写，并自动编译成浏览器识别的css，对多个css或者js压缩提高性能，使用模板开发，模块化管理html文件，添加哈希值用于更新js文件和css文件的版本。

附图说明

图1是本发明的方法流程图。