空智 阅读(73) 评论(0)

Gulp实现web服务器

阅读目录

一:gulp实现web服务器配置:

    对于前端开发而言,需要在本地搭建一个服务器作为开发使用,虽然有时候也可以直接打开页面进行预览效果,但是有时候页面需要在服务器运行,以前的做法是下载一个php,直接安装下即可,或者使用nodeJS作为web服务器,今天我门可以来学习下使用gulp的一个插件 gulp-connect来配置作为本地服务器来使用;当然该插件也是居于nodeJS环境中的。

一:gulp实现web服务器配置:

初始化安装

首先,使用下面的命令来安装connect插件。

sudo  npm  install --save-dev gulp-connect

因此package.son内容代码变为如下:

{
  "name": "tongbanke",
  "version": "1.0.0",
  "description": "tobanke'",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "gulp"
  },
  "keywords": [
    "gulp",
    "test"
  ],
  "author": "kongzhi",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-connect": "^2.0.5"
  }
}

gulpfile.js代码如下

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

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

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

如上是package.son代码和gulpfile.js代码;我们可以直接复制下来,新建package.son和gulp file.js两个文件,然后进入项目的目录下 npm install 即可把所有的依赖包加载出来。如下图:

这样就好了,然后我们在终端命令下运行gulp命令即可;如下所示:

然后我们在浏览器中打开 localhost:8080/index.html 就可以看到内容了,gulpfile.js文件是在网站的根目录下,服务器将一直运行,监听localhost:8080,如果我们想要停止服务器的话,可以回到中断命令下按ctrl+c键即可。这个demo我也放到了github上了,如下:

https://github.com/tugenhua0707/basic 

我们可以直接使用git把它克隆下来放在本地目录下,然后进入该目录下,使用终端命令 

npm install 即可,把所有的依赖包就能提取出来。再运行gulp命令后,在浏览器下运行

http://localhost:8080/即可看到index.html页面了。

二:添加实时刷新(livereload)支持

     上面我们已经完成了使用 gulp-connect 实现服务器了,现在我们需要实现实时刷新,这样的话,每当我更改一个文件的时候,我就不需要重新运行命令,直接保存代码即可生效,因此我们现在需要做两件事情:

1. 让web服务器带实时刷新支持启动。

2. 告诉组建什么时候应该自动刷新。

第一步的实现很简单:只要给connect.server()方法传入一个参数即可:

{livereload: true}即可,如下图所示:

对于第二步,我们这里简单的实现以下使用gulpfile.js 来监听less文件,自动把less文件编译成css文件,并将其注入到浏览器中,为了编译LESS文件,我门需要使用到gulp-less 插件,我门可以运行如下命令:

sudo npm install --save-dev gulp-less 来安装gulp-less,并且在gulpfile.js文件中添加这个依赖项,现在我门可以看下 package.json代码变为如下:

// package.son
{
  "name": "tongbanke",
  "version": "1.0.0",
  "description": "tobanke'",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "gulp"
  },
  "keywords": [
    "gulp",
    "test"
  ],
  "author": "kongzhi",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-connect": "^2.0.5",
    "gulp-less": "^1.2.3",
    "gulp-coffee": "^1.4.2",
    "gulp-watch": "^0.6.2"
  }
}

gulpfile.js代码变为如下:

// gulpfile.js

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

我门再来看看我门现在的目录结构如下:

如上gulpfile.js文件,我门使用watch这个任务去监听LESS文件,每当该文件发生改变的时候,我门都会对less这个任务进行编译,然后把编译的文件写入到目标文件中,因此当我门回到终端命令下运行gulp命令后,每当我门的css文件有更改的话,都可以实时监听到,对于第二点监听到话,gulp有gulp-watch这个插件了,其实可以做的更好的;同样,为了大家有源代码的话,也把项目放入git里面去,大家也可以把它git 克隆下来,自行运行即可:如下:

https://github.com/tugenhua0707/livereload

想学习gulp的watch插件和压缩及合并代码的话,可以看如下文章即可:

http://www.cnblogs.com/tugenhua0707/p/4069769.html