gulp折腾日记——gulp-livereload
大家好，虽然在博客园注册了很长一段时间，但我还没在博客园写过博客，这是在博客园的第一篇博客，希望能养成每周写博客的好习惯 O(∩_∩)O~~_)
今天要聊得是gulp的一个实时刷新的插件gulp-livereload，它是一款能够自动刷新网页的插件，能够让你在编写网页的时候，不用再按浏览器的F5进行刷新。既然要聊gulp的插件，就必须要先要学会怎么使用gulp，还没学会使用gulp的同学，可以看那看一点写的gulp教程，建议先看这篇gulp详细入门教程,然后再看其他的。相信你看完之后对gulp会有一定的了解，并且能够在你的项目中运用gulp 。
gulp构建项目
我们先来回顾一下gulp构建项目的步骤：
1.使用 npm init命令来初始化你的项目
你可以使用 npm init -y这条命令来初始化你的项目，它会按默认配置来初始化你的项目，不用你一项一项的输入。
2.新建一个gulpfile.js文件
如果你是使用npm init -y这条命令初始化，记得到新生成的package.json中修改main的值，main的值代表gulp的入口，所以需要把它的值改为你的gulp脚本的名字，一般为gulpfile.js
3.下载在模块
$ npm install gulp-less gulp-clean-css gulp-livereload --save-dev
你可以使用上面的方式一次下载多个模块，不用一个一个的下载
4.调用模块
/*载入依赖的时候, 最好是在变量前面全都添加 var, 不然有时候会出现一些莫名的错误*/
var gulp = require('gulp');
var livereload = require('gulp-livereload');
/*监听-打包 html*/
gulp.task('html',function () {
return gulp.src('src/*.html')
.pipe(livereload())
.pipe(gulp.dest('dist'));
});
/*开启监听*/
gulp.task('watch',function () {
livereload.listen(); //这句不能省，它是用来开启 livereload 服务器
gulp.watch('src/*.html',['html']);
});
注意：1.watch任务里的 livereload.listen()不能省
2.载入依赖的时候, 最好是在变量前面全都添加 var
5.谷歌浏览器或火狐安装livereload插件
6.开启监听
$ gulp watch
7.其他
有时候在使用WebStrom的时候会发现gulp的提示出不来, 或者提示你没有require这个方法, 可能是你的WebStrom的配置有问题，可以再setting中修改
WebStrom的高版本对gulp的支持很好，对gulpfile.js文件右击鼠标，在出现的菜单的最下面有个 show gulp task能将gulp的任务都列出来，很方便
gulp-livereload的使用
折腾了多次gulp-livereload后, 总结了两种方法：
不启用服务器
这种方法不启用额外的服务器，需要给每种要监听的文件添加实时刷新的监听指令，可以兼容中文gbk或者gb2312编码，不会出现乱码的现象，我的gulpfile.js文件如下：
// 添加模块依赖的时候, 最好把变量前面的 var 加上, 不然有时会出现莫名的错误
var gulp = require('gulp');
var less2css = require('gulp-less');
var cssmin = require('gulp-clean-css');
var livereload = require('gulp-livereload');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
//监听html文件
gulp.task('html',function () {
return gulp.src('src/*.html')
.pipe(livereload()) //添加刷新监听指令
.pipe(gulp.dest('dist'));
});
//编译less
gulp.task('less',function () {
return gulp.src('src/css/*.less')
.pipe(less2css())
.pipe(gulp.dest('src/css'));
});
//监听并压缩css,
gulp.task('css',function () {
return gulp.src('src/css/*.css')
.pipe(livereload())
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
});
//监听图片
gulp.task('images',function () {
return gulp.src('src/images/*')
.pipe(livereload())
.pipe(gulp.dest('dist/images'));
});
//监听脚本
gulp.task('javascript',function () {
return gulp.src('src/js/*.js')
.pipe(livereload())
.pipe(gulp.dest('dist/js'));
});
//清除文件
gulp.task('clean',function () {
return gulp.src('dist')
.pipe(clean());
});
//开启监听
gulp.task('watch',function () {
livereload.listen();
gulp.watch('src/*.html',['html']);
gulp.watch('src/css/*.less',['less']);
gulp.watch('src/css/*.css',['css']);
gulp.watch('src/images/*',['images']);
gulp.watch('src/js/*.js',['javascript']);
});
gulp.task('default',['html','less','css','images','javascript']);
这个可以直接用浏览器打开你的网页
启用服务器
这种方法需要启用服务器，可以通过启用http-server来启动livereload。有个缺点，不能兼容中文gbk或者gb2312编码。
先全局安装http-server
$ npm install http-server -g
在根目录执行
$ http-server
继续根目录，开启watch
$ gulp watch
访问localhost:8080
gulpfile代码：
var gulp = require('gulp');
var livereload = require('gulp-livereload');
//开启监听
gulp.task('watch',function () {
livereload.listen();
gulp.watch('src/**/*.*',function(file){
livereload.changed(file.path); //changed()方法必须启动服务器才能使用，不然会报错
});
});
