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