标签：重复 live style 源代码 maps 监听 sch port rcp
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‘]);
或者
gulp.task(‘default‘,[‘webserver‘],function(){
gulp.watch(app.srcPath + ‘styles/*.scss‘, [‘sass‘]);
gulp.watch(app.srcPath + ‘**/*.html‘, [‘html‘]) // 监听根目录下所有.html文件
});
发现两个问题：
1.运行gulp，发现sass能监听，但检查语法错误能力不够全，如下：
sass语法中变量声明在变量调用之前，而本demo并没因此终止监听或者出现错误。
2.另外如出现错误，命令端口会挂掉，可以用gulp处理错误的task，如：gulp-plumber
标签：重复 live style 源代码 maps 监听 sch port rcp
原文地址：http://www.cnblogs.com/liangcheng11/p/6898989.html
