先后端分离开发脚手架

时间 2019-11-17

标签后端分离开发脚手架繁體版

原文原文链接

上篇文章写完后，有一些同窗反应有些东西没有说清楚，因此我决定抽点时间把这个工具写的详细一点javascript

描述

这是一个是针对于页面比较繁多的非单页面应用的官网开发脚手架。打包工具使用的是gulp，还用到了require引入资源的方式，样式编写时用的less，页面的模板和后台的交互显示是使用的art-template（下面有详细描述这个插件）
项目地址css

如何使用

下载项目

$ git clone git@github.com:HuYuee/web-starter-kit.git复制代码

安装依赖

$ cd web-starter-kit && npm install复制代码

启动页面，访问http://localhost:3333/src/html/index.html

$ npm run start复制代码

产出最终工程

$ npm run build复制代码

目录结构

bin
render.js——(在gulpfile文件中使用到)解析layout中的模板html，将完整的html产出到src/html中
dist——产出目录（在项目下运行npm run build就能够将src下相关资源产出到该目录）
src——开发目录（只需在该目录下开发便可）
conf——配置文件目录
css——由less文件生成的的css文件
data——mock数据文件夹
html——由layout中的html文件解析出来的最终html文件
images——图片文件夹
js——js文件夹（js相关在此文件夹中开发）
layout——html的源文件夹（html在该文件夹中开发）
less——less文件夹（样式相关的在该文件夹中开发）
vendor——第三方库
widget——公用的layout中使用的模板（模板在该文件夹中开发）

如何新建页面

新建html

在src/layout文件夹中新建page1.html,在代码能够引入部门公用html模板，也能够写本身定制的代码。这里须要明确的说一点：在html中的底部会加入require引入，这里必需要写入页面在require中对应的配置名称，好比下面的page1。若是只是测试能够拷入如下代码：html

<!DOCTYPE html>
<html>
<head>
<!-- ws: 引入公共样式 -->
{{{include '../widget/public_style'}}}
<!-- we: 引入公共样式 -->
</head>
<body style="visibility:hidden;">
<h1>这里是page1的内容</h1>
<a href="index.html">点击回首页</a>
<!--ws: 公共Script -->
{{{include '../widget/public_script'}}}
<!--we: 公共Script -->
<script> //经过require的方式来引入须要的js require( ['page1'], function() { }); </script>
</body>
</html>复制代码

新建样式文件

在src/less/page文件夹中新建page1.less，在代码中能够引入公共的less模板，也能够本身写。若是是测试能够拷入如下代码：java

// 引入基本样式
@import '../widget/common.less';

h1 {
font-size: 25px;
}复制代码

新建js文件

在src/js文件夹下新建page1文件夹，而后在page1文件夹下新建文件page1.js。里面能够经过require语法引入其余js。能够拷入如下代码进行测试：jquery

define(["jquery", "data", "template"], function($, d, template) {
$("body").css("visibility", "visible");

});复制代码

配置require

在src/conf/require.config.js中配置新加入的js和css，以下图所示：git

固然若是你再别的方面还须要进行增长或者修改能够到相应的目录下去修改，好比图片在images中修改，第三方插件在vendor中加入。github
最后你能够访问[http://localhost:3334/src/html/page1.htmlweb

使用到的技术

require：实现模块化开发
mock：实现本地模拟服务器端返回数据
browsersync：启动本地浏览页面，并实现当源码更改时页面实时刷新
art-template：使用到了html模块化封装，还有js模板
gulp-autoprefixer：使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀
图片压缩，less转css，css和js压缩，css生成sourcemap