轻松gulp：1.超轻量的本地服务器

Posted 2020-08-12 滑稽主义

gulp有很多种好，最好的地方就是可以搭本地服务器。以前想调试弄服务器要装一堆环境和服务，比如说xAMP，现在统统不要！gulp用插件就搞定了，只对前端，百分百超轻量。

 

如果能搞懂服务器插件，就能搞懂gulp用法的一大半了。

 

方案一：connect插件

 

1.安装

打开命令行工具

—>进入gulp文件目录

—>安装connect插件：

$ npm install --save-dev gulp-connect

 

2.配置gulp

打开gulpfile.js

—>输入：

var gulp = require(‘gulp‘);
var connect = require(‘gulp-connect‘);

gulp.task(‘server‘, function () {
    connect.server();
});
 
gulp.task(‘default‘, [‘server‘]);

　　

—>保存关闭

 

详解（可以先跳过）：

require()

gulp基于node.js，所以一开始必须用node的require方法加载模块，类似于载入外部文件。

在第1、2行，就是载入了gulp和gulp-connect模块。

两句可以用逗号连在一起，这样写：

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

var

为什么不能直接require就好，就像import那样？

这是node外部引用机制，我估计这样做可以避免命名空间冲突。用var声明一个变量，载入这个模块变成类似对象的存在，那么要用里面的东东就必须用这个变量操作，与外面的东东不冲突。

比如gulp.task()和connect.server()，就是用前面声明的变量来调用方法。天知道还会有多少个方法叫task和server？所以这样做之后，方法名称可以各自命名，更加简洁易懂了。

gulp.task()

对的，gulp就是用来搞♂一个个的task，所以task方法用得最多，有两个参数。

看最后一行的gulp.task(‘default‘, [‘server‘]);，用了default参数，表示配置了默认启动‘server’这个task。用了之后在命令行就可以输入gulp启动server，不写这一行的话则要输入gulp server。
而在gulp.task(‘server‘, function () { connect.server(); }); 中，第一个参数是定义名称可以随便写，第二个参数是个函数，函数中调用了connect的server方法。
那么你有没有想过这两个部分可不可以合♂在一起？
比如变成：gulp.task(‘default‘, function () { connect.server(); });
完全可以！

 

3.试用connect

打开命令行工具

—>进到gulp所在目录

—>输入“gulp”回车，启动connect的服务器，大功告成！

咦感觉还少了点什么……对哦，我网站目录怎么设置？

 

略解：

上面说过，这里再提一下。有用default的话，就可以直接输入“gulp”启动我们自定的task（这里是‘server‘）。

如果没有用到default，启动的时候就手动加task名改成“gulp server”。

 

4.配置目录

connect

把你的网站文件夹放在gulp目录内，例如文件夹名称为“Start”。

—>打开gulpfile.js

—>找到connect.server()这一段，增加root参数改成：

connect.server({
  root:‘start‘    //不区分大小写
});

—>再次启动gulp服务，localhost:8080现在就是主页啦。

 

略解：

root是connect的API，另外还有port、name等等。

 

5.配置多个目录！

用不同的task，就可以开多个本地服务器，so easy！

例子：

gulp.task(‘connectDev‘, function () {
  connect.server({
    name: ‘Dev App‘,
    root: ‘app‘,
    port: 8000,
  });
});
gulp.task(‘connectDist‘, function () {
  connect.server({
    name: ‘Dist App‘,
    root: ‘dist‘,
    port: 8001,
  });
});

后面default也要改成：

gulp.task(‘default‘, [‘connectDev‘,‘connectDist‘]);

 

略解：

添加不同的task，用不同的端口来浏览不同目录的网页。

 

 

方案二：webserver插件

 

webserver也是gulp中的本地服务器插件，使用方法没有connect简单。更好的地方是可以设置运行服务后自动浏览网页。

安装：

$ npm install --save-dev gulp-webserver

 

同样以放在gulp目录中的Start文件夹为例：

var gulp = require(‘gulp‘);
var webserver = require(‘gulp-webserver‘);
 
gulp.task(‘webserver‘, function() {
  gulp.src( ‘Start‘ )
    .pipe(webserver({
      open: true    //服务器启动时自动打开网页
  }));
});

 

略解：

所以和connect不同，webserver需要依靠gulp.src().pipe()，但这是更标准的做法，其它插件也会接触到，所以后面再看。