使用Gulp构建本地开发Web服务器

栏目: 编程工具 · 发布时间: 3年前

来源: banu.blog.163.com

内容简介:使用Gulp构建本地开发Web服务器

本文转载自:http://banu.blog.163.com/blog/static/231464820173220419480?utm_source=tuicool&utm_medium=referral,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

问题

  • 1. 在写前端界面代码时,想调试的时候需要配置一个 Apache 或者 Nginx 服务器
  • 2. 每次修改代码都需要刷新一下,验证效果。

解决方案

Gulp + Gulp-connect +watch + livereload

Gulp是目前风头正劲的前端自动化工具,有取代Grunt的趋势。初次使用,一下就被其简洁的语法折服了,目前我还是只是在小项目中使用,一般语法简洁的 工具 在面对大型,复杂项目时都会有不足,这点留待以后考察了。 

Gulp是基于NodeJS的,因此使用之前需要先安装NodeJS, 不得不说NodeJs繁荣了整个前端开发生态啊。有了NodeJS之后,安装Gulp就很容易了。 

Shell代码   使用Gulp构建本地开发Web服务器

  1. npm install -g gulp  

有了Gulp之后,主角登场,安装Gulp插件gulp-connect,Gulp的插件机制非常好,每个插件的功能都很单一,纯粹。gulp-connect的功能就是在本地启动一个Web Server 

Shell代码   使用Gulp构建本地开发Web服务器

  1. npm install -g gulp-connect  

安装完了插件之后,就可以写Gulp构建脚本了,Gulp的脚本非常简单,就是一个 Javascript 脚本定义的DSL,下面就是一个通过gulp-connect定义一个本地Server服务,然后通过watch任务和livereload设置实现自动刷新的: 

Javascript代码   使用Gulp构建本地开发Web服务器

  1. //引入插件   
  2. var  gulp = require( 'gulp' );  
  3. var  connect = require( 'gulp-connect' );  
  4.   
  5. //创建watch任务去检测 html 文件,其定义了当html改动之后,去调用一个Gulp的Task   
  6. gulp.task( 'watch'function  () {  
  7.     gulp.watch([ './www/*.html' ], [ 'html' ]);  
  8. });  
  9.   
  10. //使用connect启动一个Web服务器   
  11. gulp.task( 'connect'function  () {  
  12.     connect.server({  
  13.         root:  'www' ,  
  14.         livereload:  true   
  15.     });  
  16. });  
  17.   
  18. gulp.task( 'html'function  () {  
  19.     gulp.src( './www/*.html' )  
  20.         .pipe(connect.reload());  
  21. });  
  22.   
  23. //运行Gulp时,默认的Task   
  24. gulp.task( 'default' , [ 'connect''watch' ]);  

通过在项目目录下,运行命令‘gulp’: 

Shell代码   使用Gulp构建本地开发Web服务器

  1. [gulp] Using gulpfile ~/Documents/workspace/ionic_workspace/open_party/gulpfile.js  
  2. [gulp] Starting  'connect' ...  
  3. [gulp] Server started http://localhost: 8080   
  4. [gulp] LiveReload started on port  35729   
  5. [gulp] Finished  'connect'  after  13  ms  
  6. [gulp] Starting  'watch' ...  
  7. [gulp] Finished  'watch'  after  6.69  ms  
  8. [gulp] Starting  'default' ...  
  9. [gulp] Finished  'default'  after  11  μs  

然后在修改代码时,界面自动刷新,效果如下: 

使用Gulp构建本地开发Web服务器


以上所述就是小编给大家介绍的《使用Gulp构建本地开发Web服务器》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Bandit Algorithms for Website Optimization

Bandit Algorithms for Website Optimization

John Myles White / O'Reilly Media / 2013-1-3 / USD 19.99

This book shows you how to run experiments on your website using A/B testing - and then takes you a huge step further by introducing you to bandit algorithms for website optimization. Author John Myle......一起来看看 《Bandit Algorithms for Website Optimization》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具