先说一下关于前端开发的模式,我们知道前端代码最基本就是html的展示,其只需要浏览器就可以直接打开运行,因此在页面开发的过程中要实现页面的跳转就是在html中告诉要跳转的下一个页面的路径(绝对路径或相对路径),然后浏览器去加载下一个页面来展示。当然这中间会有很多技术,原理基本就是这样。为了让页面表现更丰富,功能更强大,就使用css和js来添加更多的样式布局和逻辑。随着对页面表现力的要求越来越高,页面中包含的逻辑也越来越复杂,代码之间的耦合性也越来越高,维护成本也越来越高。为了降低开发维护成本,提高开发效率,渐渐的就出现了各种各样的前端框架(angular,JQuery等)。哎呀!有点跑题了。接着说页面跳转,通常有两种方式:
1. 页面文件可以放在自己本地电脑上,这样通过文件夹路径就可以直接访问
2. 当然更常见的是放在服务器上(哪怕这个服务器是部署在本地电脑上的),这时候需要用IP+Port来访问(就跟上往一样,无非是使用了域名解析)。
前者纯属自娱自乐,是不会有实际意义的。因为前端开发的目的最终是要和后端衔接在一起形成一个完整的web应用。目前web开发的模式基本都是前后端分离的,前后端按照约定独立开发,独立部署(这个见仁见智,前端不一定需要独立部署,开发完成可以直接嵌入到后端中去)。所以说即便在页面文件放在本地最终还是要放到服务器上去的,这样别人才能通过域名(或者IP+Port)访问到你的页面。
那么问题来了,怎么样把写的html文件放到服务器上呢?跟把大象装冰箱的过程是一样的,需要三步:
1. 如果要求不高的话随便找一台电脑当服务器
2. 把页面文件拷到这台电脑上
3.启动一个服务告诉外界页面文件所在的位置,知道网络协议的童鞋都清楚,同一台电脑上是通过端口号来识别不同应用的(更准确的说是服务)。因此,这里就需要一个应用或者服务在这台服务器上运行,并且通过唯一的端口号来标识这个服务。
那么问题又来了,怎么来启这个服务?以前通常都是根据IP和TCP/UDP协议直接写socket,来写一个服务。现在更多的是用别人造的轮子(更重要的是这些轮子通常都比自己写的要好),如apache,Nginx等web服务器都具备这个基本的功能,当然这些服务器的功能要强大的多,在项目开发阶段(部署上线之前)在自己电脑上弄个这种服务器会总让人觉得不检点。我的做法就是使用gulp-connect,妈呀,终于扯到主题了。
gulp-connect是开源的,它是一个静态web的服务,使用起来比大象关冰箱还要简单,只需要两步:
1. 定义一个server
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('myServer', function() {
connect.server({
root: 'app',
port: 8000,
livereload: true
});
});
2. 启动server
gulp myServer
其中root
是服务启动的根目录,换句话说别人通过IP+Port端口访问到你的服务器所访问到文件夹就是root
(这里是'app'
),port就是端口了,livereload
是一个标志,为true
时gulp会自动检测文件的变化然后自动进行源码构建。
当然上述代码可运行首先需要安装gulp
和gulp-connect
以及比较常用的gulp
插件。关于gulp
的安装和使用可以看官方介绍,用npm安装就行了,不复杂。上述server
的定义跟其他gulp task
一样写到根目录下的gulpfile.js
文件中就行了。然后在根目录启动命令行,输入gulp myServer
将春暖花开。