安装了 browser-sync
//这个要装浏览器插件
//npm install gulp-livereload --save-dev
//这种不用装插件|我用的这种(感觉这种安装方便点,是自动加载css,html和js的相应功能)
npm install browser-sync --save-dev
gulpfile.js要修改下:
var gulp=require('gulp');
//css
var less=require('gulp-less');
var cleanCSS = require('gulp-clean-css');//css 代码压缩
var autoprefixer = require('gulp-autoprefixer'); //css代码自动补全
//js
var babel = require('gulp-babel'); //css代码自动补全
var uglify = require('gulp-uglify');//js压缩
//tool
var sourcemaps = require('gulp-sourcemaps');//生成sourcemaps
var 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": "3811970@qq.com"
},
"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