gulp教程之gulp-livereload
简介：
gulp-livereload拯救F5！当监听文件发生变化时，浏览器自动刷新页面。【事实上也不全是完全刷新，例如修改css的时候，不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】特别是引用外部资源时，刷新整个页面真是费时费力。
1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件
1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程
1.2、本示例目录结构如下：
2、本地安装gulp-livereload(为了演示，安装了gulp-less)
2.1、github：https://github.com/vohof/gulp-livereload
2.2、安装：命令提示符执行 cnpm install gulp-livereload --save-dev
2.3、注意：没有安装cnpm请使用 npm install gulp-livereload --save-dev。 什么是cnpm，如何安装？
2.4、说明：--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json？
3、配置gulpfile.js
3.1、基本使用(当less发生变化的时候，自动更新页面)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
var gulp = require('gulp'),
less = require('gulp-less'),
livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'))
.pipe(livereload());
});
//特别注意：若编译less的时候，同时执行其他操作，有可能引起页面刷新，而不是将样式植入页面
//例如下面任务同时生成sourcemap：
//var sourcemaps = require('gulp-sourcemaps');
//gulp.task('less', function () {
// gulp.src(['src/less/*.less'])
// .pipe(sourcemaps.init())
// .pipe(less())
// .pipe(sourcemaps.write('./'))
// .pipe(gulp.dest('src/css'))
// .pipe(livereload());
//});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('src/less/**/*.less', ['less']);
});
|
|
1
2
3
4
5
6
7
8
9
10
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
</body>
</html>
|
4、谷歌浏览器或火狐安装livereload插件
4.1、说明：谷歌浏览器安装插件需要FQ，我已经下载了最新版本2.1.0到本地，点击下载（谷歌为.crx文件，火狐为.xpi文件）
4.2、安装方法：谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装
5、执行监听任务
5.1、命令提示符执行：gulp watch
6、打开页面并启动livereload浏览器插件
6.1、以服务器的方式打开页面，例如http://localhost:4444，而不是file:///F:/phpStudy/project/src/index.html，否则无法启动livereload浏览器插件
6.2、点击livereload浏览器插件即可启动，如下图：
6.3、简单几步就可以很嗨的写代码了
来源：http://www.ydcss.com/archives/702
gulp教程之gulp-livereload的更多相关文章
- gulp教程之gulp中文API
1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入 ...
- gulp教程之gulp-autoprefixer<转>
简介: 使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀.使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀.[特别是开发移动端页面时,就能充分体现它的优势.例如兼容性不 ...
- gulp教程之gulp-less
简介: 使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息. 1.安装nodejs/全局安装gu ...
- gulp教程之gulp-htmlmin
简介: 使用gulp-htmlmin压缩html,可以压缩页面javascript.css,去除页面空格.注释,删除多余属性等操作. 1.安装nodejs/全局安装gulp/本地安装gulp/创建pa ...
- gulp教程之gulp-minify-css
简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致. ...
- gulp教程之gulp-imagemin
简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片) 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile ...
- gulp教程之gulp-rev-append
简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...
- gulp教程之gulp-uglify
简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1. ...
- gulp教程之gulp-concat
简介: 使用gulp-concat合并javascript文件,减少网络请求. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1. ...
随机推荐
- RK 61 键盘 Ubuntu 下键位映射修改方案
在用户 Home 目录下面创建 .Xmodmap 文件,然后输入以下的内容: remove Lock = Caps_Lock remove Control = Control_L remove Con ...
- Mysql修改字段长度
alter table '表名' modify column '列名' varchar(50);
- java 垃圾回收
转自:http://www.360doc.com/content/13/0305/10/15643_269388816.shtml
- 关于freemaker的一点使用技巧
在做国泰君安2016年中秋送电影票活动中,需要做这样一个手机页面,展示所有中奖用户的中奖信息.如下图: 要求对用户的后记号码中间5位做隐藏处理.最开始的处理方法是在对用户实体的get()方法做处理 / ...
- NPOI导入xls，xlsx格式实例
NPOI DLL下载地:http://npoi.codeplex.com/releases using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; us ...
- linux内核追踪——find_next_bit函数详详详解
写在前面 宗旨:把话说清楚,把道理讲透彻. 约定:所有代码均来自Linux内核2.6.24版. 建议:本文介绍得十分详细,但也略显繁琐,读者可以先看“Ⅴ.总结”部分带注释的源码,如果哪里不清楚,再回头 ...
- margin塌陷现象
如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...
- Google-GLog编译以及使用
心血来潮要去看开源代码,看到公司的日志库是在google-glog开源库上二次封装的,那就先撸glog吧. 1. 下载源码 一条命令取源码:git clone github.com/google/g ...
- Linux就该这么学
第三章:Vim编辑器与Shell脚本 Vim文本编辑器 在Linux系统中配置应用服务,实际上就是在修改它的配置文件. 在热门的Linux操作系统中都会默认安装一款超好用的文本编辑器--"v ...
- 插件开发-UI插件开发
1.新建类库解决方案,引入命名空间,同时引入要添加UI Form的WebPart(在Portal\UILib目录下) 2.继续UFSoft.UBF.UI.Custom.ExtendedPartBase ...