gulp-webserver是开启服务器,通常和gulp-livereload结合使用。而这两个结合使用效果,几乎类似browser-Sync。下面是gulp-webserver和gulp-livereload的一个小demo。

源代码下载(寄放在码云上)。

1. 所用的gulp-task的包及其他npm包

2.所需的目录结构

3.gulpfile.js 中设置源码目录和开发目录

var app = {
srcPath: 'src/',
devPath: 'build/'
};

4.安装gulp-load-plugins,这个task是来避免重复require(引用模块),所以在gulpfile.js中看到如下代码:

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();

引入gulp-load-plugins之后,使用其他模块方法,只需要在其方法前加上“$.”,以sass为例:

gulp.task('sass',function(){
gulp.src(app.srcPath+'styles/*.scss')
.pipe($.sourcemaps.init())
.pipe($.sass())
//这里加了./ 表示生成的.map文件
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(app.devPath + 'css'))
//单独使用livereload监听
//.pipe($.livereload());
});

5.设置服务器端口,和浏览器同步

gulp.task('webserver', function() {
gulp.src(app.devPath) // 服务器目录(./代表根目录)
.pipe($.webserver({ // 运行gulp-webserver
livereload: true, // 启用LiveReload,去掉f5刷新的痛点
open: true, // 服务器启动时自动打开网页
port: 3000
}));
});

  

6. 整合默认一个任务

// 监听任务
gulp.task('watch',function(){
gulp.watch(app.srcPath + 'styles/*.scss', ['sass']);
gulp.watch(app.srcPath + '**/*.html', ['html']) // 监听根目录下所有.html文件
}); //默认任务
gulp.task('default',['webserver','watch']);

发现两个问题: 

1.运行gulp,发现sass能监听,但检查语法错误能力不够全,如下:

sass语法中变量声明在变量调用之前,而本demo并没因此终止监听或者出现错误。

2.另外如出现错误,命令端口会挂掉,可以用gulp处理错误的task,如:gulp-plumber(传送门)

gulp-webserver的更多相关文章

  1. gulp(一)

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  2. gulp相关

    'use strict'; var gulp = require('gulp'), webserver = require('gulp-webserver'), //gulp服务器 connect = ...

  3. gulp下livereload和webserver实现本地服务器下文件自动刷新

    一.前言 node从v0.10.26升级(为了匹配autoprefixer)到v5.3.0后出现了gulp插件兼容问题,在nodejs下各种新的插件出现问题,需要重新配置.livereload实现ch ...

  4. 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。

    本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...

  5. Gulp常用前端流程自动化配置

    前言 近期的项目全部由Grunt + LESS 转向改用Gulp + SASS 进行前端开发,也就奔着Gulp那比较好用的自定义函数而来的. 一.package.json文件配置如下: { " ...

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

    工作中可能会用到的小工具,在此记录一下.可以实现的功能有: 本地http服务器 页面实时刷新 可以模拟ajax请求 第一步,新建package.json文件.用到了gulp.gulp-webserve ...

  7. gulp进阶构建项目由浅入深

    gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...

  8. Gulp实现web服务器

    Gulp实现web服务器 阅读目录 一:gulp实现web服务器配置: 二:添加实时刷新(livereload)支持 回到顶部 一:gulp实现web服务器配置: 对于前端开发而言,需要在本地搭建一个 ...

  9. 用gulp替代fekit构建前端项目

    https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反, ...

  10. 基于gulp 的前端自动化构建方案总结

    一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...

随机推荐

  1. Unity绘制Png图片

    using System.Collections; using System.Collections.Generic; using System.IO; using UnityEngine; publ ...

  2. Swift - 构造函数

    Swift 2.0 构造函数基础 构造函数是一种特殊的函数,主要用来在创建对象时初始化对象,为对象成员变量设置初始值,在 OC 中的构造函数是 initWithXXX,在 Swift 中由于支持函数重 ...

  3. Android井字游戏(二)游戏界面

    图片与代码可见书配套官网下载 1 棋盘 1.1  先将游戏界面所需的图片放于“drawable-xxhdpi”文件夹中,后缀xxhdpi表示超高密度. 然后将图片封装到drawable中一个名为til ...

  4. 【架构师之路】Nginx负载均衡与反向代理—《亿级流量网站架构核心技术》

    本篇摘自<亿级流量网站架构核心技术>第二章 Nginx负载均衡与反向代理 部分内容. 当我们的应用单实例不能支撑用户请求时,此时就需要扩容,从一台服务器扩容到两台.几十台.几百台.然而,用 ...

  5. 【cs229-Lecture4】Newton’s method

    之前我们在求Logistic回归时,用的是梯度上升算法,也就是要使得似然函数最大化,利用梯度上升算法,不断的迭代.这节课引出牛顿方法,它的作用和梯度上升算法的一样的,不同的是牛顿方法所需的迭代次数更少 ...

  6. LeetCode 77 Combinations(排列组合)

    题目链接:https://leetcode.com/problems/combinations/#/description    Problem:给两个正数分别为n和k,求出从1,2.......n这 ...

  7. sencha touch routes(路由) 传递中文参数

    使用路由的时候可以传递参数 如下: index.html#eaterylist/335/61/61/61/B/商户名称 其中6个参数依次是:商户编号/公众账号/微信号/校验号/服务类型/商户名称 因为 ...

  8. [BeiJing2011]元素[贪心+线性基]

    2460: [BeiJing2011]元素 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1245  Solved: 652[Submit][Stat ...

  9. ansible的优化

    Ansible企业实战环境中,如果管理的服务器越来越多,Ansibe执行效率会变得比较慢,可以通过优化Ansible提供工作效率,由于Ansible基于SSH协议通信,SSH连接慢会导致整个基于Ans ...

  10. PHP服务器访问优化

    常规的优化措施: 磁盘写入,网络安全,证书加密,CPU,内存,DNS解析,数据库优化,页面gzip压缩 PHP gzip压缩打开: 打开php目录下的php.ini文件,找到zlib.output_c ...