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

Posted 滑稽主义

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轻松gulp:1.超轻量的本地服务器相关的知识,希望对你有一定的参考价值。

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(),但这是更标准的做法,其它插件也会接触到,所以后面再看。
 
 

以上是关于轻松gulp:1.超轻量的本地服务器的主要内容,如果未能解决你的问题,请参考以下文章

gulp-connect 启动本地服务及实现浏览器热加载

利用gulp搭建本地服务器,并能模拟ajax

轻松保存重复多用的代码片段

npm + gulp 项目构成详解

gulp 项目构建 代码压缩与混淆

gulp常用插件之gulp-sourcemaps使用