前端开发梦中景象

　曾几何时，一直梦想能够有超酷的前端开发环境，加快工作进度，减轻工作强度，看了这张图有些震撼了，慢慢研究他们是怎么玩的。。。

var projectrootabsdir = '/home/vagrant/Code/kidsit/';
gulp.task('less',function(){
var pagelessentry = config.pagelessentry;
log(pagelessentry);
return gulp
.src(pagelessentry)
.pipe(plumber())
.pipe(expect({ checkRealFile: true },pagelessentry))
.pipe(printfileinfo())

// .pipe(sourcemaps.init())
.pipe(less())
// .pipe(rename('bootstrap.css'))
// .on('error',errorhandler)
// .pipe(sourcemaps.write())
.pipe(gulp.dest(projectrootdir+'public/build/css/'));
});

function startBrowserSync () {
if(browserSync.active){
return;
}
log('starting browser-sync ...');
var options={
proxy: 'kidsit.cn',
files: [projectrootabsdir+'public/build/css/**/*.css'], //projectrootdir+'public
ghostMode: {
clicks: true,
location: false,
forms: true,
scroll: true
},
injectChanges: true,
logFileChanges: true,
logLevel: 'debug',
logPrefix: 'kidist-browser-sync',
notify: true,
reloadDelay: 0
};
browserSync(options);

}
gulp.task('watchless',function(){//entry task to be launched
log(config.lessfiles);
gulp.watch('../Code/kidsit/resources/assets/less/**/*.less', ['less'])
.on('change',function (event) {
// var srcPattern = new RegExp('/.*(?=/')
log(event.type);
});
startBrowserSync();

});

注意：browsersync的file watch功能只对绝对地址的文件有效，不能使用relative path的格式，否则files section无效！