标签：
平时使用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
标签：
原文地址：http://www.cnblogs.com/xjcjcsy/p/4467751.html
