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 ...
随机推荐
- [SublimeText] 之 Packages
概述 Packages 是指供 Sublime Text 使用的资源文件集合,例如插件.语法高亮.菜单.片断等等.Sublime Text 自身安装了一些 Packages,还有很多用户创建的 Pac ...
- O2O(online to offline)营销模式
O2O营销模式又称离线商务模式,是指线上营销线上购买带动线下经营和线下消费.O2O通过打折.提供信息.服务预订等方式,把线下商店的消息推送给互联网用户,从而将他们转换为自己的线下客户,这就特别适合必须 ...
- adc转换原理
模数转换器即A/D转换器,或简称ADC,通常是指一个将模拟信号转变为数字信号的电子元件.通常的模数转换器是将一个输入电压信号转换为一个输出的数字信号.由于数字信号本身不具有实际意义,仅仅表示一个相对大 ...
- codeforces水题100道 第十六题 Codeforces Round #164 (Div. 2) A. Games (brute force)
题目链接:http://www.codeforces.com/problemset/problem/268/A题意:足球比赛中如果主场球队的主场球衣和客队的客队球衣颜色一样,那么要求主队穿上他们的可对 ...
- 例说hg(五)————创建repository
本文由博主原创,转载请注明出处(保留此处和链接): IT人生(http://blog.csdn.net/robinblog/article/details/17933747) 有很多网站提供了免费的M ...
- 【大数据系列】HDFS安全模式
一.什么是安全模式 安全模式时HDFS所处的一种特殊状态,在这种状态下,文件系统只接受读数据请求,而不接受删除.修改等变更请求.在NameNode主节点启动时,HDFS首先进入安全模式,DataNod ...
- 【Spring】依赖注入 加载顺序
一.Spring依赖注入depents-on参数 depents-on是指指定Bean初始化及销毁时的顺序,使用depends-on属性指定的是Bean要先初始化完毕后才初始化当前Bean,由于只有S ...
- 【转】Windows socket基础
转自:http://blog.csdn.net/ithzhang/article/details/8448655 Windows socket 基础 Windows socket是一套在Windows ...
- MFC创建好的对话框如何移植到新程序中
1.用文本文件打开需要移植对话框工程中的rc文件 2.在RC文件夹中找到需要移植的对话框内容,然后拷贝到新的工程的rc文件中 3.在原有工程的rsource.h中所有和这个对话框有关的ID都拷贝到新的 ...
- linux系统下网络主-备份策略之网卡bond技术
操作系统:CentOS Linux release 7.1.1503 (Core) 网卡适配器: eno1.eno2 bonding类型:mode=1 (active-backup),主-备份策略 网 ...