用gulp来实现web服务器

用gulp来实现web服务器

点这里查看原文

---

gulp如今是愈来愈流行了。它能够作的事情实在是太多了，好比，拼接js文件，压缩图片。

在这个教程里，你会了解怎么使用gulp.js来实现一个应用了内置的livereload功能的本地web服务。

之前的实现方式

假设咱们要开发一个单页应用。这个app的入口是index.html。咱们的目标是可让浏览器经过localhost来访问这个页面。之前，你须要安装一个Apache或者Nginx这样的服务器软件来实现这样的功能。

更棒的实现方式

时至今日，javascript无所不能了，就要称霸天下了，甚至它均可以去实现一个web服务。这篇文章里，咱们就要用一个gulp的插件，人称gulp-connect。用这个插件来实现一个WEB服务。

接下来的篇幅，咱们就要来为咱们的单页应用来配置一个本地服务。

开始下文以前，我假定你已经把准备工做都已经作好了，好比gulpfile文件已建好！

第一步，安装

第一步，咱们要来安装下gulp-connect插件
安装的命令以下：

npm install --save-dev gulp-connect

小提示：npm install --save-dev 能够简写为npm i -D

如今，咱们来定义web服务，gulpfile.js的代码以下

var gulp = require('gulp'),
connect = require('gulp-connect');

gulp.task('webserver',function(){
    connect.server();
})

gulp.task('default',['webserver']);

只要在终端执行gulp命令，而后在浏览器地址栏输入localhost:8080就能够看到index.html啦。
localhost:8080所指向的就是gulpfile文件所在的那一级目录。
在终端输入ctrl+c会结束当前任务。

在github能够找到本文全部例子的源码。
点这里看github

加入livereload的支持

建立一个基础的web服务很简单，是否是？那如今咱们继续来把livereload加入web服务中。
咱们须要作两件事情：
首先，告诉web服务启动的时候运行livereload。
其次，在页面有更新的时候通知livereload刷新页面。

第一步很简单是否是，咱们只要将livereload的属性设置为true，将webserver这个任务写成下面的样子。

gulp.task('webtask',function(){
    connect.server({
        livereload:true
    });
});

第二步的话就取决于你具体的实例了。好比说，咱们要将less文件自动编译成css样式表，并让其被浏览器识别。
咱们来将这个例子分步处理下：
首先，须要一个'watcher'，用来监控less文件的变化，监控到变化后这个'watcher'就会去触发less的编译器，将其输出为一个css文件。以后这个css文件有更新了以后就会去通知livereload，让其刷新页面。

在这个例子里面，还须要用到gulp-less插件。
插件的安装命令以下

npm install --save-dev gulp-less

gulp里已经有了watch这个方法，能够来充当'watcher'

咱们的文档结构大体能够以下：
.
├── node_modules
│ └── ...
├── styles
│ └── main.less
├── gulpfile.js
├── index.html
└── package.json

watch任务执行的时候，gulp.js监听styles文件夹里less文件的全部改动，当有改动的时候就会触发less任务。每一次编译以后，结果会自动返回给浏览器。
gulpfile.js文件的代码以下所示（做者容许将下列代码使用于你本身的项目）：

var gulp = require('gulp'),
connect = require('gulp-connect'),
less = require('gulp-less');

gulp.task('webserver',function(){
    connect.server({
        livereload:true
    });
});

gulp.task('less',function(){
    gulp.src('styles/main.less')
    .pipe(less())
    .pipe(gulp.dest(styles))
    .pipe(connect.reload());
});

gulp.task('watch',function(){
    gulp.watch('style/*.less',['less']);
})

gulp.task('default',['less','webserver','watch']);

如今咱们从新在终端执行gulp，而后再在浏览器打开localhost:8080。
作完这些，咱们就能够试着在style文件夹的less文件里作一些改动。它会当即编译并刷新浏览器。
看吧，这样咱们并不须要依赖什么浏览器插件，就能够实现页面的自动刷新啦！

一些小小调整

注意，咱们以前写的gulpfile.js文件只是一个小小的示例用于示范怎么来实现一个运用了livereload的web服务。
我很是建议你们能够把将其余gulp插件一块儿玩起来。
你也能够试着从新修改下你写的各个task的结构，用一用不是gulp内置的watch方法，这个方法能够只监控有改动的文件。这个对于之后你若是使用更大的代码库来讲尤其重要。

本教程的接下来部分，咱们来看一看对于以上实现web服务的另外一个方案。

更换Hostname和Port

gulp-connect插件自己有不少可选的配置。
好比说，你能够更改web服务的端口号或者hostname。你甚至能够用一个你习惯使用的hostname配上80端口（默认的是localhost:8080）
代码以下：

connect.server({    port:80,
    host:'gulp.dev'});

进行了这个配置以后，咱们要在hosts文件里面加上gulp.dev,而后运行sudo gulp，由于要使用80端口的话，是须要管理员权限的。

一些进阶特性

你能够同时启动多个web server。这个颇有用的。好比说，若是你要同时启动一个开发和一个测试的服务。

gulp-connect也能够设置多个根目录。
好比，你要用coffeescript，而后将压缩过得js文件放到一个临时的文件夹，那就能够在根目录root中加上这个临时的文件夹而不去影响原来的源文件夹。

在GitHub上你能够得到更多的示例，连接以下：
https://github.com/AveVlad/gulp-connect

重构咱们的代码

在以上的例子中，咱们只是写了一个小小的将less编译成css文件，并让其当即体如今浏览器中的例子。
虽然它奏效了，可是咱们能够作的更好。
当把编译和livereload混合起来用的时候，可能会有一些问题。
因此，咱们将他们拆分开来并用watch来监控。
为此，就须要用到上面提到的gulp-watch插件。

咱们能够再加入一个coffeeScript的编译步骤。这个增长的步骤会使咱们的新结构更加清晰。

安装新插件的命令

npm install --save-dev gulp-watch gulp-coffee

在gulpfile.js文件的最顶部引用这两个插件。在下面的步骤中，我假设你已经在scripts文件夹里有了以.coffee为后缀的文件。
重写的gulpfile文件，以下所示：

var gulp = require('gulp'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
coffee = require('gulp-coffee'),
less = require('gulp-less');

gulp.task('webserver',function(){
    connect.server({
        live reload:true,
        root:['.','.tmp']
    });
});

gulp.task('livereload',function(){
    gulp.src(['.tmp/styles/*.css','.tmp/scripts/*.js'])
    .pipe(watch()) //注意此处的watch是gulp-watch插件
    .pipe(connect.reload());
});

gulp.task('coffee',function(){
    gulp.src('scripts/*.coffee')
    .pipe(coffee())
    .pipe(dest('.tmp/scripts'));
});
gulp.task('less',function(){
    gulp.src('styles/main.less')
    .pipe(less())
    .pipe(gulp.dest('.tmp/styles'));
});

gulp.task('watch',function(){
    gulp.watch('style/*.less',['less']);
    gulp.watch('scripts/*.coffee',['coffee']);
})

gulp.task('default',['less','coffee','watch','webserver','livereload']);

最大的变化，是增长的livereload任务。这个任务仅仅是监听了编译以后的文件，而后若是有变化就刷新浏览器。watch()方法能够仅仅只从新加载有变化的文件。gulp自带的gulp.watch()会将整个项目都从新加载。
由于添加了livereload这个任务，咱们就不须要在每一步的编译以后都加上.pipe(connect.reload())了。因此，咱们把每一个任务按照他们各自关注的点分开定义，这样对于项目开发来讲比较好。
同时，咱们也发现，编译以后的文件再也不保存至他们各自的文件夹去了。如今它们存储在一个临时文件夹.tmp中。文件夹的内容就是生成的文件，它们存储在临时文件夹，再也不去污染scripts和styles文件夹。咱们也建议不要将临时文件夹加入版本控制系统。
咱们要作的就是把临时文件夹也视为一个根目录
代码以下

root:['.','.tmp']

这边通过个人测试，通过编译以后会自动生成.tmp文件夹，这个文件夹里有一个styles文件夹存储css文件有一个scripts文件夹存储js文件。而后咱们的版本控制系统是git，那么在.gitignore文件里就要写上.tmp，不要让.tmp这个临时文件夹加入版本控制系统。由于在本地预览，这样html就得要能获取到css和js文件，那么就在root里把.tmp也设置为根目录。这样gulp执行的时候，就能读取到css和js文件啦~
提交git的话，就提交html,styles folder,scripts folder.
协同开发者若是clone的话，再执行下gulp就会再次生成临时文件夹，进行预览。

总结

如今，你已经能够用gulp来构建一个本地web服务了。
你也能够尝试和其余gulp插件配合使用，来构建或者测试一个单页应用。
这里的web服务仅仅是本地服务，若是你要做为生产，就得要用一些相似Nginx或者CDN这样的高效解决方案。

Grunt及相似的项目均可以实现以上的功能，gulp只是提供了一个比较简便的方法来实现这个功能。

本文转载自：http://www.jianshu.com/p/e66a5bb96b7e