gulp的自动化开发环境配置

安装了browser-sync //这个要装浏览器插件//npm install gulp-livereload --save-dev//这种不用装插件|我用的这种（感觉这种安装方便点，是自动加载cs

安装了 browser-sync

//这个要装浏览器插件//npm install gulp-livereload --save-dev//这种不用装插件|我用的这种（感觉这种安装方便点，是自动加载css，html和js的相应功能）npm install browser-sync --save-dev

gulpfile.js要修改下：

var gulp=require('gulp');//cssvar less=require('gulp-less');var cleanCSS = require('gulp-clean-css');//css 代码压缩var autoprefixer = require('gulp-autoprefixer'); //css代码自动补全//jsvar babel = require('gulp-babel'); //css代码自动补全var uglify = require('gulp-uglify');//js压缩//toolvar sourcemaps = require('gulp-sourcemaps');//生成sourcemapsvar concat = require('gulp-concat'); //css代码自动补全var browserSync = require('browser-sync').create();var reload      = browserSync.reload;//定义一个testLess任务（自定义任务名称）gulp.task('testLess', function () {    var gulpTest=gulp.src('src/css/**.less'); //该任务针对的文件 'src/css/xxx.less'|['src/css/xxx.less','src/css/xxx1.less']|'src/css/*.less' 都行    if(process.env.NODE_ENV!='production'){        gulpTest=gulpTest.pipe(sourcemaps.init());    }    gulpTest=gulpTest.pipe(less()) //该任务调用的模块        .pipe(autoprefixer({ browsers: [                'Android >= 4',                'Chrome >= 20',                'Firefox >= 24', // Firefox 24 is the latest ESR                'Explorer >= 9',                'iOS >= 6',                'Opera >= 12',                'Safari >= 6'            ], cascade: true , remove:false})) //自动补全        .pipe(cleanCSS())//{compatibility: 'ie8'} ie8|ie7|*(默认) 其它值为ie9+ 压缩css        .pipe(concat('app.css'));    if(process.env.NODE_ENV!='production'){        gulpTest=gulpTest.pipe(sourcemaps.write());    }    gulpTest=gulpTest.pipe(gulp.dest('./dest/css')); //将会在src/css下生成index.css});gulp.task('testEs6', function () {    var gulpTest= gulp.src('src/js/**.es6');    if(process.env.NODE_ENV!='production'){        gulpTest=gulpTest.pipe(sourcemaps.init());    }    gulpTest=gulpTest.pipe(babel({presets: ['es2015','stage-3']}))        .pipe(uglify())        .pipe(concat('app.js'));    if(process.env.NODE_ENV!='production'){        gulpTest=gulpTest.pipe(sourcemaps.write());    }    gulpTest=gulpTest.pipe(gulp.dest('./dest/js'));});gulp.task('testHtml', function () {    var gulpTest=gulp.src('src/html/**.html');    gulpTest=gulpTest.pipe(gulp.dest('./dest/html')); //将会在src/css下生成index.css});//watch自动编译gulp.task('watch', function () {    gulp.watch('./src/js/**.es6', ['testEs6']);    gulp.watch('./src/html/**.html', ['testHtml']);    gulp.watch('./src/css/**.less', ['testLess']);    //各watch不能重叠如不能写成./src/**.es6,./src/**.html这种，要分离开});//server实时brower显示更改gulp.task('server', function () {    browserSync.init({        server: {            baseDir: "./dest"        }    });    gulp.watch("./dest/**").on("change", reload);});//默认的任务gulp.task('default',['watch','server']); //定义默认任务

{  "name": "gulpTest",  "version": "1.0.0",  "description": "This is for study gulp project !",  "homepage": "",  "repository": {    "type": "git",    "url": "http://git.oschina.net/huhu/gulpTest"  },  "author": {    "name": "yfx",    "email": "[email protected]"  },  "license": "ISC",  "scripts": {    "test": "cross-env NODE_ENV=production gulp"  },  "devDependencies": {    "babel-core": "^6.9.0",    "babel-preset-es2015": "^6.9.0",    "babel-preset-stage-3": "^6.5.0",    "browser-sync": "^2.12.9",    "cross-env": "^1.0.7",    "gulp": "^3.9.1",    "gulp-autoprefixer": "^3.1.0",    "gulp-babel": "^6.1.2",    "gulp-clean-css": "^2.0.7",    "gulp-concat": "^2.6.0",    "gulp-less": "^3.1.0",    "gulp-sourcemaps": "^1.6.0",    "gulp-uglify": "^1.5.3"  }}

gulpfile.js外部应该还可以通过装一个babel的插件使gulpfile.js改为es6的结构，但由于nodejs6都支持es6了（等es7就可以用gulp了），感觉意义不大了。

主要就是通过gulp自带的watch函数通过对文件的修改做监听，从而完成打包和浏览器同步。

可参考：https://git.oschina.net/huhu/gulpTest.git