gulp-webserver
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的更多相关文章
- gulp(一)
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- gulp相关
'use strict'; var gulp = require('gulp'), webserver = require('gulp-webserver'), //gulp服务器 connect = ...
- gulp下livereload和webserver实现本地服务器下文件自动刷新
一.前言 node从v0.10.26升级(为了匹配autoprefixer)到v5.3.0后出现了gulp插件兼容问题,在nodejs下各种新的插件出现问题,需要重新配置.livereload实现ch ...
- 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。
本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...
- Gulp常用前端流程自动化配置
前言 近期的项目全部由Grunt + LESS 转向改用Gulp + SASS 进行前端开发,也就奔着Gulp那比较好用的自定义函数而来的. 一.package.json文件配置如下: { " ...
- 利用gulp搭建本地服务器,并能模拟ajax
工作中可能会用到的小工具,在此记录一下.可以实现的功能有: 本地http服务器 页面实时刷新 可以模拟ajax请求 第一步,新建package.json文件.用到了gulp.gulp-webserve ...
- gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
- Gulp实现web服务器
Gulp实现web服务器 阅读目录 一:gulp实现web服务器配置: 二:添加实时刷新(livereload)支持 回到顶部 一:gulp实现web服务器配置: 对于前端开发而言,需要在本地搭建一个 ...
- 用gulp替代fekit构建前端项目
https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反, ...
- 基于gulp 的前端自动化构建方案总结
一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...
随机推荐
- ubuntu 手动安装mysql
申请了一台云主机,需要手动安装所有环境,今天将mysql安装过程记下. 安装mysqla. 下载不了gcc, 需要先运行apt-get updateb. cmake报错,每次要先删除cmakeCach ...
- js数组sort方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Apache HTTP Server 与 Tomcat 的三种连接方式介绍
本文转载自IBM developer 首先我们先介绍一下为什么要让 Apache 与 Tomcat 之间进行连接.事实上 Tomcat 本身已经提供了 HTTP 服务,该服务默认的端口是 8080,装 ...
- linux查看Raid磁盘阵列信息
软件raid:只能通过Linux系统本身来查看 cat /proc/mdstat 可以看到raid级别,状态等信息. 硬件raid: 最佳的办法是通过已安装的raid厂商的管理工具来查看,有cmdli ...
- 嵌入式系统C编程之堆栈回溯(二)
前言 本文作为<嵌入式系统C编程之堆栈回溯>的补充版.文中涉及的代码运行环境如下: 一 异常信号 信号就是软件中断,用于向正在运行的程序(进程)发送有关异步事件发生的信息.Linux应用 ...
- WebApp与Native App有何区别
转:http://blog.sina.com.cn/s/blog_5f2df1e401018hjj.html 今天看的一篇关于html5的Web App与Native App的技术分析,真的很棒分享一 ...
- 题目1454:Piggy-Bank(完全背包问题)
题目链接:http://ac.jobdu.com/problem.php?pid=1454 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...
- OpenStack网络详解
本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. Openstack需要对网络有一些了解才能进入openstack的世界,很多都是 ...
- 学习项目部署Django+uwsgi+Nginx生产环境部署
绪论 项目生产环境部署,是很重的一个知识点.第一,Django自带的服务器很简陋,由于测试和开发环境尚可,无法用于生产环境,保障安全性和可靠性.以及性能.此外,学习部署方式,还有利于了解生产部署后的项 ...
- 用logstash,elasticSearch,kibana实现数据收集和统计分析工作
原文链接:http://www.open-open.com/lib/view/open1448799635720.html 世界上的软件80%是运行在内网的,为了使得运行在客户端的软件有良好的体验,并 ...