Gulp livereload

　　平时使用yeoman作为前端部署工具，感觉到yeoman构建工具虽然方便，但是速度和大小总是不尽人意。

　　最近看到了gulp http://gulpjs.com/ 比较感兴趣随动手一试

　　gulp的安装以及一些基本的用法github上已经说的很多了，在这里主要说一下关于livereload 的使用，看到特首的日志里（http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/）说到使用chrome的livereliad插件配合使用觉得比较麻烦，毕竟不是所有的同学都能出墙的，

　　我的做法是使用gulp-connect https://www.npmjs.com/package/gulp-connect,

　　首先

npm install gulp-connect --save-dev

　　安装好之后，配置服务器

//server
gulp.task(‘connectDev‘, function() {
	connect.server({
		root: path.src,
		port: 8000,
		livereload: true
	});
});

　　注册刷新页面任务

//reload server
gulp.task(‘reload-dev‘,[‘scripts‘,‘styles‘,‘images‘],function() {
	gulp.src(path.src + ‘**/*.*‘)
	  .pipe(connect.reload());
});

　　监听事件

// Watch
gulp.task(‘watch‘, function() {
	//监听生产环境目录变化
  	gulp.watch(path.src + ‘**/*.*‘,[‘reload-dev‘]);
})

　　设置默认任务

//测试服务器
gulp.task(‘default‘, [‘connectDev‘, ‘watch‘]);

　　只要在对应的目录下运行glup 便可以监听所有文件动态刷新页面，再也不用F5了

　　下面附上我的gulpfile.js,大家分享下

/* gulpfile demo1  author：csy*/
var gulp   = require("gulp"),
	sass   = require("gulp-ruby-sass"),					//sass编译
	cache  = require("gulp-cache"),						//图片缓存，只有图片替换了才压缩
	uglify = require("gulp-uglify"),					//js压缩
	concat = require("gulp-concat"),					//文件合并
	mincss = require("gulp-minify-css"),				//css压缩
	minimg = require("gulp-imagemin"),					//图片压缩
	rename = require("gulp-rename"),					//重命名
	notify = require("gulp-notify"),					//消息通知
	jshint = require("gulp-jshint"),					//js格式检查
	autoprefixer = require("gulp-autoprefixer"),		//自动补全css前缀
	livereload   = require("gulp-livereload"),			//自动刷新
	del = require("del"),								//清空数据
	connect = require(‘gulp-connect‘);	 				//WEB测试服务器
/* 设置路径 */
var path = {
	src 	: "src/",
	css 	: "src/styles/",
	js  	: "src/scripts/",
	scss	: "src/scss/",
	img	: "src/images/",
	build	: "build"
}

/* 编译scss 自动补全前缀 */
gulp.task(‘styles‘, function(){
	return sass(path.scss + ‘main.scss‘, { style: ‘expanded‘ })
		.pipe(autoprefixer({browsers: [‘last 2 versions‘, ‘safari 5‘, ‘opera 12.1‘, ‘ios 6‘, ‘android 4‘]}))
		.pipe(gulp.dest(path.css))
		.pipe(rename({suffix: ‘.min‘}))
		.pipe(mincss())
		.pipe(gulp.dest(path.build + ‘/styles‘))
		.pipe(notify({ message : ‘Styles task complete‘}));
})

/* 操作js */
gulp.task(‘scripts‘, function(){
	return gulp.src(path.js + "**/*.js")
		.pipe(jshint())
		.pipe(jshint.reporter(‘default‘))
		.pipe(concat(‘main.js‘))
		.pipe(gulp.dest(path.build + ‘/scripts‘))
		.pipe(rename({suffix: ‘.min‘}))
		.pipe(uglify())
		.pipe(gulp.dest(path.build +‘/scripts‘))
		.pipe(notify({message : ‘Scripts task complete‘}))
})

/* 压缩图片 */
gulp.task(‘images‘, function(){
	return gulp.src(path.img + "**/*")
		.pipe(minimg({optimizationLevel: 3, progressive: true, interlaced: true}))
		.pipe(gulp.dest(path.build + ‘/images‘))
		.pipe(notify({message : ‘Images task complete‘}))
})
//	移动html
gulp.task(‘html‘, function(){
	return gulp.src(path.src + "*.html")
		.pipe(gulp.dest(path.build))
		.pipe(notify({message : ‘Html task complete‘}))
})

// Clean
gulp.task(‘clean‘, function(cb) {
    del([‘build/styles‘, ‘build/scripts‘, ‘build/images‘], cb)
});

//测试服务器
gulp.task(‘default‘, [‘connectDev‘, ‘watch‘]);

//server
gulp.task(‘connectDev‘, function() {
	connect.server({
		root: path.src,
		port: 8000,
		livereload: true
	});
});

//reload server
gulp.task(‘reload-dev‘,[‘scripts‘,‘styles‘,‘images‘],function() {
	gulp.src(path.src + ‘**/*.*‘)
	  .pipe(connect.reload());
});
// Watch
gulp.task(‘watch‘, function() {
	//监听生产环境目录变化
  	gulp.watch(path.src + ‘**/*.*‘,[‘reload-dev‘]);
})

// 生成发布版本
gulp.task(‘build‘, [‘clean‘], function(){
	gulp.start(‘styles‘, ‘scripts‘, ‘images‘, ‘html‘);
})

　　最后，想出墙的同学可以戳 http://honx.in/i/VOwbA4IaAx5FsDXn