使用Gulp构建Web服务器

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

博客分类：

 
• JavaScript

 

问题 

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

解决方案 

Gulp + Gulp-connect +watch + livereload 

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

Gulp是基于NodeJS的，所以使用以前须要先安装NodeJS， 不得不说NodeJs繁荣了整个前端开发生态啊。有了NodeJS以后，安装Gulp就很容易了。 

npm install -g gulp

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

npm install -g gulp-connect

安装完了插件以后，就能够写Gulp构建脚本了，Gulp的脚本很是简单，就是一个Javascript脚本定义的DSL，下面就是一个经过gulp-connect定义一个本地Server服务，而后经过watch任务和livereload设置实现自动刷新的： 

Javascript代码  

//引入插件
var gulp = require('gulp');
var connect = require('gulp-connect');

//建立watch任务去检测html文件,其定义了当html改动以后，去调用一个Gulp的Task
gulp.task('watch', function () {
    gulp.watch(['./www/*.html'], ['html']);
});

//使用connect启动一个Web服务器
gulp.task('connect', function () {
    connect.server({
        root: 'www',
        livereload: true
    });
});

gulp.task('html', function () {
    gulp.src('./www/*.html')
        .pipe(connect.reload());
});

//运行Gulp时，默认的Task
gulp.task('default', ['connect', 'watch']);

 

经过在项目目录下，运行命令‘gulp’: 

Shell代码  

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

 

而后在修改代码时，界面自动刷新，效果以下： 

 

原文：http://ningandjiao.iteye.com/blog/2070572?utm_source=tuicool&utm_medium=referral