npm 包 gulp-live-server 使用教程

介绍

gulp-live-server 是一个通过 gulp 自动管理和运行 web 服务器的 npm 包。它提供了实时 web 服务器功能，可以监控文件的变化并自动刷新页面。

在前端开发中，我们可以借助此工具实现快速地预览开发效果，省去手动刷新页面的繁琐操作，提高效率。

安装

在安装 gulp-live-server 之前，先确保已经安装了 node.js 和 gulp。安装命令如下：

npm install -g node
npm install -g gulp

接下来，使用 npm 安装 gulp-live-server：

npm install --save-dev gulp-live-server

使用

配置 gulpfile.js

在项目根目录下创建 gulpfile.js，并在其中引入 gulp-live-server 模块：

var gulp = require('gulp');
var liveserver = require('gulp-live-server');

然后定义 gulp 任务，用于运行 web 服务器：

gulp.task('serve', function() {
  var server = liveserver.new('server.js');
  server.start();
});

其中 'server.js' 是指定服务器配置文件的位置。也可以直接传入配置对象，如：

var server = liveserver.new({
  port: 8080,
  host: "127.0.0.1",
  root: "./public"
});

配置 web 服务器

在 project 根目录下创建 server.js，并在其中配置服务器。例如，以下代码会创建一个服务监听 http://localhost:8080，并将运行目录指定为根目录 ./：

var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
    console.log('Server running on 8080...');
});

运行

在终端中，进入项目根目录，并执行 gulp serve 命令，启动 web 服务器。

$ gulp serve
[23:50:23] Using gulpfile ~/project/gulpfile.js
[23:50:23] Starting 'serve'...
[23:50:23] Starting server.js...
[23:50:23] Starting livereload server on port 35729
[23:50:23] Server started http://localhost:8080

现在可以在浏览器中访问 http://localhost:8080，查看 web 服务器中的页面效果。如果更改了项目中的代码，会自动刷新页面，并呈现最新的效果。

示例代码

-- -------------------- ---- -------
--- ---- - ----------------
--- ---------- - ----------------------------

------------------ ---------- -
  --- ------ - ----------------------------
  ---------------
---

-------------------- -----------
展开代码

server.js 文件：

var connect = require('connect');
var serveStatic = require('serve-static');

connect().use(serveStatic(__dirname)).listen(8080, function(){
    console.log('Server running on 8080...');
});

结语

通过使用 gulp-live-server，我们可以轻松地搭建一个实时 web 服务器，提高前端开发效率。同时，灵活的配置文件和命令行参数，也使得该包具有一定的扩展性和适应性，可以满足不同场景的需求。

希望本篇文章能让初学者对 gulp 和 gulp-live-server 有更深入的了解，并尝试应用到实际项目中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64774