使用 Gulp 配置 Web 开发服务器

重点:

1.从github上拉下来的gulp文件，只要里面的package.json的依赖有的话，只需用命令进入目录，输入cnpm install  ,安装完全部插件后，该文件会多了一个"node_moules"文件夹，在connect.server配置好port后能够直接命令"gulp"  ,运行全部任务，命令会显示:localhost:port   ,就能够直接在浏览器输入:localhost:8088等等访问项目。

2.没有gulp，直接进入命令"cnpm init"  ,而后输入文件描述等等，文件夹生成package.json。然后命令“npm install gulp-connect --save-dev”  等本项目安装指定插件依赖。再新建gulpfile.js配置自动化任务就可。

 

构建工具 Gulp.js 最近正在变得愈来愈流行。咱们能够用它作不少事，好比合并 JavaScript 文件或者压缩图片。

本文将向你介绍如何使用 Gulp.js 来做为本地 Web 服务器，并且内置了 livereload 支持。

从前的作法

假设咱们须要开发一个单页的 web 应用。应用入口很简单，就是 index.html 文件。咱们的目的是经过浏览器，以及 localhost 域名访问这个文件(某些状况下，经过 file:// 协议访问不能知足需求)。在此以前，或许你会在本机安装一个 Apache 或者 Nginx 服务器。若是只是为了经过 HTTP 协议访问一些静态文件，如今以上这些都不必了。

更好的办法

如今，由 Javascript 来实现的解决方案几乎无处不在，甚至是做为 web 服务器（都要感谢 Node.js啊）。最流行的是一个叫作 Connect 的开源组件。咱们将经过 Gulp.js 的一个插件 gulp-connect 来调用它（与 grunt-contrib-connect 同样，不过 Gulp.js 更容易）。

在接下来的章节中，咱们要为咱们的单页应用配置一个本地 web 服务器，我假设你已经有了其它基础配置，好比 gulpfile.js 文件。

初始化安装

首先，用下面的命令来安装 Connect 插件：

npm install--save-dev gulp-connect

提示：npm install --save-dev 能够简化为 npm i -D.

接下来，为 web 服务器定义一个任务。gulpfile.js 文件中的代码相似下面这样：

1 2 3 4 5 6 7 8

vargulp = require('gulp'),     connect = require('gulp-connect');   gulp.task('webserver', function() {     connect.server(); });   gulp.task('default', ['webserver']);

这样就定义好了，只要在终端/命令行中执行 gulp, 就能够启动 web 服务器。而后能够在浏览器中打开localhost:8080, 就能看到 index.html 的内容。这个简单的 web 服务器以当前 gulpfile.js 文件所在的文件夹做为网站根目录。服务器将一直运行，监听 localhost:8080, 要中止服务器，能够回到终端/命令行下按 Ctrl + C。（用过 Node.js, Grunt 或者 PHP 内置服务器的话，你必定对此很是熟悉。）

这个示例，以及接下来的全部示例的源代码能够在Github下载。每一个例子的代码在一个单独的文件夹下，你须要在对应的文件夹下执行 npm install 命令来安装依赖项。

添加实时刷新（ livereload ） 支持

设置基本的 web 服务器很是简单，接下来咱们要继续完善它，首先要实现实时刷新。须要作两件事：

• 让 web 服务器带实时刷新支持启动
• 告诉组件何时应该自动刷新

第一步很简单，只要给 connect.server() 方法传入一个参数便可：

1 2 3 4 5

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

第二步取决于你的项目的状况。在这个示例中（从 Github 下载示例代码，本例使用 02-livereload ），咱们须要 Gulp.js 自动把 LESS 文件编译成 CSS 样式，并将其注入到浏览器。

先来分解一下这个例子：咱们须要一个“监控器（ watcher ）”，它负责检查 LESS 文件是否发生变化。若是发生变化，它会通知 LESS 编译器把 LESS 文件编译为 CSS 文件，而后新的 CSS 文件经过实时刷新注入到页面。

为了编译 LESS 文件，须要用到 gulp-less 插件。你能够经过运行 npm i -D gulp-less 来安装 gulp-less 并在 gulpfile.js 文件中添加这个依赖项。watcher 不用额外插件， Gulp.js 已经自带了。

咱们的文件结构如如下所示：

. ├── node_modules │   └── ... ├── styles │   └── main.less ├── gulpfile.js ├── index.html └── package.json

在 watch 任务中，Gulp.js 监听 styles 目录下全部的 *.less 文件，一旦它们发生变化，就触发 less 任务。本例中， main.less 是 LESS 的入口文件。每次编译完成后，结果会自动注入到浏览器。 gulpfile.js的内容相似下面的实例，你能够复制粘贴到你的项目中：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 定义依赖项 vargulp = 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']);

保存以后，回到终端/命令行，Ctrl+C 中止服务器（若是它还处于运行状态），而后再次执行 gulp 启动服务器。打开浏览器，打开 localhost:8080. 如今咱们能够去 style 目录下的 LESS 文件作一点修改，并保存。你会看到 LESS 的修改被实时编译并自动同步生效到浏览器中的页面上。特别要说明的是，你不须要任何浏览器插件或者扩展。

一点优化

请记住：前面的 gulpfile.js 只是一个为了演示如何使用 gulp.js 做为带有实时刷新支持的 web 服务器的精简示例。在实际项目中，建议配合其它的一些插件一块儿使用。你能够尝试着从新排列任务的顺序，或者尝试一下非内置的 gulp-watch 插件，这个插件可让你只处理发生变化的文件。若是你的项目有大量的代码/文件，这个功能很是有用。在接下来的例子中，我会再演示另外的一种任务结构。

修改主机名和端口

gulp-connect 插件支持不少配置选项，前面咱们只用到了 livereload 这一个。若是你须要修改 web 服务器监听的端口或者主机名，好比想经过 http://gulp.dev 来访问，你能够这样作：

1 2 3 4

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

为了可以经过 gulp.dev 域名以及默认的 80 端口来启动和访问，你须要：

• 在 hosts 文件中配置 gulp.dev 指向本机 IP 地址
• 没有其它程序占用80端口（好比 Apache, Nginx, QQ旋风，腾讯视频，迅雷等……）
• root 或者 Administrator 权限（因为80端口是系统保留端口）

一些高级特性

你还能够继续深刻探索 connect 插件的其它用法，好比同时启动多个 web 服务器。有时候这很必要，好比你须要运行一个开发服务器，同时执行集成测试等。

gulp-connect 也提供了一些额外的特性，好比用多个文件夹做为单个服务器的根目录。例如，你使用 CoffeeScript, 但愿把编译的 Javascript 文件暂存在某个临时目录中，你能够把本来的项目根目录与该临时文件夹同时做为网站根目录。具体的实例能够在这里找到。

重构咱们的代码

在前面的示例中，咱们配置了一个“小巧玲珑”的 gulpfile.js 来完成把 LESS 文件编译成 CSS 而且自动注入浏览器的任务。它能用，可是还能够优化。因为咱们把编译和实时刷新两个任务混合成了一个，有可能会致使问题。因此，接下来咱们要把它们拆成单独的任务，而后只监控生成后的文件。为了达到这个目的，就须要用到刚才提到的 gulp-watch 插件。

既然要重构，那就再多作一点，咱们顺便把 CoffeeScript 编译也添加进去。这样，新的目录结构会更加整洁。首先经过 npm 来安装须要的新插件：

npm install--save-dev gulp-watchgulp-coffee

而后在 gruntfile.js 中加载。接下来的步骤，我假设你已经在 scripts 目录下建立了一些 .coffee 文件。这个示例的源文件在前面已经提到过的这个 github repo 中的 03-livereload-refactored 文件夹中。重构以后的 gruntfile.js 参见下面的代码，咱们随后要一步一步地讲解这些代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

vargulp = require('gulp'),   connect = require('gulp-connect'),   watch = require('gulp-watch'),   less = require('gulp-less'),   coffee = require('gulp-coffee');   gulp.task('webserver', function() {   connect.server({     livereload: true,     root: ['.', '.tmp']   }); });   gulp.task('livereload', function() {   gulp.src(['.tmp/styles/*.css', '.tmp/scripts/*.js'])     .pipe(watch())     .pipe(connect.reload()); });   gulp.task('less', function() {   gulp.src('styles/main.less')     .pipe(less())     .pipe(gulp.dest('.tmp/styles')); });   gulp.task('coffee', function() {   gulp.src('scripts/*.coffee')     .pipe(coffee())     .pipe(gulp.dest('.tmp/scripts')); });   gulp.task('watch', function() {   gulp.watch('styles/*.less', ['less']);   gulp.watch('scripts/*.coffee', ['coffee']); })   gulp.task('default', ['less', 'coffee', 'webserver', 'livereload', 'watch']);

最大的变化是加入了单独的 livereload 任务。这个任务只负责监控（经过 gulp-watch 插件）编译后的文件的变化，并在浏览器中刷新它们。gulp-watch 自定义的 watch() 函数让咱们能够只刷新变化的文件，而内置的 gulp.watch() 一般会刷新全部文件。

因为加入了一个额外的独立监控任务，编译步骤后面就再也不须要 .pipe(connect.reload()) 命令。这样咱们就把任务根据它们的不一样职能进行了划分，这是软件开发中通过实践验证的设计模式。

此外还应该注意到，编译后的文件再也不保存在它们各自原先的源文件夹中，而是存储在 .tmp 临时文件夹中，这个文件夹的内容只有编译生成的文件，这样原来的样式和脚本文件夹就再也不被生成的文件污染。这个文件夹还应该被排除在版本管理系统以外，好比 svn-ignore 属性和 .gitignore 文件。可是为了在开发过程当中可以进行测试，须要把 .tmp 也做为网站根目录，在 webserver 任务中，完成这个工做的任务是下面这行代码：

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

通过重构以后，完成的工做虽然没有什么不一样，可是相比以前，就变得更加清晰明了，并且便于扩展。

总结

经过本文，你了解了如何 使用 Gulp.js 来做为 web 服务器。

你能够把这个与其它技术一块儿使用，好比测试，或者建立单页应用程序。须要提醒的是，这个 web 服务器只适合做为本机开发用途。生产环境你仍是须要使用性能更好，更可靠的解决方案，好比 Nginx 或者 CDN.