Gulp实现服务器
2016-03-11 22:44
239 查看
Gulp实现web服务器
Gulp实现web服务器阅读目录
一:gulp实现web服务器配置:
二:添加实时刷新(livereload)支持
回到顶部
一:gulp实现web服务器配置:
对于前端开发而言,需要在本地搭建一个服务器作为开发使用,虽然有时候也可以直接打开页面进行预览效果,但是有时候页面需要在服务器运行,以前的做法是下载一个php,直接安装下即可,或者使用nodeJS作为web服务器,今天我门可以来学习下使用gulp的一个插件 gulp-connect来配置作为本地服务器来使用;当然该插件也是居于nodeJS环境中的。
一:gulp实现web服务器配置:
初始化安装
首先,使用下面的命令来安装connect插件。
sudo npm install --save-dev gulp-connect
因此package.son内容代码变为如下:
{ "name": "tongbanke", "version": "1.0.0", "description": "tobanke'", "main": "main.js", "scripts": { "test": "test" }, "repository": { "type": "git", "url": "gulp" }, "keywords": [ "gulp", "test" ], "author": "kongzhi", "license": "ISC", "devDependencies": { "gulp": "^3.6.2", "gulp-connect": "^2.0.5" } }
gulpfile.js代码如下
var gulp = require('gulp'), connect = require('gulp-connect'); gulp.task('webserver', function() { connect.server(); }); gulp.task('default', ['webserver']);
如上是package.son代码和gulpfile.js代码;我们可以直接复制下来,新建package.son和gulp file.js两个文件,然后进入项目的目录下 npm install 即可把所有的依赖包加载出来。如下图:
这样就好了,然后我们在终端命令下运行gulp命令即可;如下所示:
然后我们在浏览器中打开 localhost:8080/index.html 就可以看到内容了,gulpfile.js文件是在网站的根目录下,服务器将一直运行,监听localhost:8080,如果我们想要停止服务器的话,可以回到中断命令下按ctrl+c键即可。这个demo我也放到了github上了,如下:
https://github.com/tugenhua0707/basic
我们可以直接使用git把它克隆下来放在本地目录下,然后进入该目录下,使用终端命令
npm install 即可,把所有的依赖包就能提取出来。再运行gulp命令后,在浏览器下运行
http://localhost:8080/即可看到index.html页面了。
回到顶部
二:添加实时刷新(livereload)支持
上面我们已经完成了使用 gulp-connect 实现服务器了,现在我们需要实现实时刷新,这样的话,每当我更改一个文件的时候,我就不需要重新运行命令,直接保存代码即可生效,因此我们现在需要做两件事情:
1. 让web服务器带实时刷新支持启动。
2. 告诉组建什么时候应该自动刷新。
第一步的实现很简单:只要给connect.server()方法传入一个参数即可:
{livereload: true}即可,如下图所示:
对于第二步,我们这里简单的实现以下使用gulpfile.js 来监听less文件,自动把less文件编译成css文件,并将其注入到浏览器中,为了编译LESS文件,我门需要使用到gulp-less 插件,我门可以运行如下命令:
sudo npm install --save-dev gulp-less 来安装gulp-less,并且在gulpfile.js文件中添加这个依赖项,现在我门可以看下 package.json代码变为如下:
// package.son { "name": "tongbanke", "version": "1.0.0", "description": "tobanke'", "main": "main.js", "scripts": { "test": "test" }, "repository": { "type": "git", "url": "gulp" }, "keywords": [ "gulp", "test" ], "author": "kongzhi", "license": "ISC", "devDependencies": { "gulp": "^3.6.2", "gulp-connect": "^2.0.5", "gulp-less": "^1.2.3", "gulp-coffee": "^1.4.2", "gulp-watch": "^0.6.2" } }
gulpfile.js代码变为如下:
// gulpfile.js // 定义依赖项 var gulp = require('gulp'), connect = require('gulp-connect'), less = require('gulp-less'); // 定义 webserver 任务 gulp.task('webserver', function() { connect.server({ livereload: true }); }); // 定义 less 任务 gulp.task('less', function() { gulp.src('styles/main.less') .pipe(less()) .pipe(gulp.dest('styles')) .pipe(connect.reload()); }); // 定义 watch 任务 gulp.task('watch', function() { gulp.watch('styles/*.less', ['less']); }) // 定义默认任务 gulp.task('default', ['less', 'webserver', 'watch']);
我门再来看看我门现在的目录结构如下:
如上gulpfile.js文件,我门使用watch这个任务去监听LESS文件,每当该文件发生改变的时候,我门都会对less这个任务进行编译,然后把编译的文件写入到目标文件中,因此当我门回到终端命令下运行gulp命令后,每当我门的css文件有更改的话,都可以实时监听到,对于第二点监听到话,gulp有gulp-watch这个插件了,其实可以做的更好的;同样,为了大家有源代码的话,也把项目放入git里面去,大家也可以把它git 克隆下来,自行运行即可:如下:
https://github.com/tugenhua0707/livereload
想学习gulp的watch插件和压缩及合并代码的话,可以看如下文章即可:
/article/4937202.html
相关文章推荐
- c语言学习中的杂记
- 解决 eclipse 启动报 ”failed to load the jni shared library“ 问题
- shell订时检测sshd的端口
- iOS开发--UIPickerView(选择器控件) 省份和城市的做法
- UINavigationController导航控制器
- 斐波那契数列
- [matlab]在cvx中使用Mosek
- 线性表之静态链表
- TCP/IP有限状态机
- 走近腾讯 走进腾讯(一个关于面试准备的记录)
- jenkins配置
- c#GDI绘制数字问题
- 视频播放(在线)
- 线性表之双循环链表
- 我的第一篇人生博客
- 表(一)、嬰幼兒各階段發展遲緩警訊
- Android控件第4类——ProgressBar
- Spark on yarn有分为两种模式yarn-cluster和yarn-client
- 加油吧,骚年!
- 六轴系统中陀螺仪输出的角速度的一些问题