Gulp+browser-sync打造前端开发自动刷新-白红宇

以下是gulpfile.js:

                            
var
gulp = require(
'gulp'
),
    
config = require(
'./config'
),
    
cleanCss = require(
'gulp-clean-css'
),
    
jshint = require(
'gulp-jshint'
),
    
uglify = require(
'gulp-uglify'
),
    
rename = require(
'gulp-rename'
),
    
concat = require(
'gulp-concat'
),
    
browserify = require(
'gulp-browserify'
),
    
nodemon = require(
'gulp-nodemon'
),
    
sourcemaps = require(
'gulp-sourcemaps'
),
    
del = require(
'del'
),
    
sass = require(
'gulp-sass'
),
    
replace = require(
'gulp-replace'
),
    
browserSync = require(
'browser-sync'
).create();
gulp.task(
'sass'
, 
function
() { 
    
return
gulp.src(
'client/sass/main.scss'
)
        
.pipe(sourcemaps.init())
        
.pipe(sass())
        
.pipe(sourcemaps.write())
        
.pipe(gulp.dest(
'client/sass/sass2css'
))
        
.pipe(rename({suffix: 
'.min'
}))
        
.pipe(cleanCss())
        
.pipe(gulp.dest(
'client/css/export'
))
        
.pipe(browserSync.reload({stream: 
true
}));
});
gulp.task(
'clean'
, 
function
(callback) { 
    
del([
'client/css/export/*.min.css'
], callback);
});
gulp.task(
'watch'
, 
function
() { 
    
browserSync.init({ 
        
proxy: 
'localhost:'
+ config.listenPort
    
});
    
gulp.watch(
'client/sass/main.scss'
, [
'sass'
]);
    
gulp.watch(
'views/pages/*.jade'
, browserSync.reload);
});
gulp.task(
'serve'
, 
function
() { 
    
return
nodemon({ 
        
script: 
'app.js'
,
        
ignore: [
            
"client/**"
,
            
"views/**"
        
]
    
});
});
gulp.task(
'develop'
, [
'watch'
, 
'serve'
]);
         
       

有了这个，开发就很有乐趣了。参考：http://www.browsersync.cn/docs/gulp/

本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1841653，如需转载请自行联系原作者