标签:3.2 http 浏览器 png 目录 开发 插件 ref base
es6是什么?借着这个话题,我想说:身为web前端的工作者连es6没听说,转行吧。
demo的代码如下:
源码下载 或者 gitclone地址: git@git.oschina.net:sisheb/gulpdemo.git
1.gulp用到开发plugins如下:
"devDependencies": { "babel-preset-es2015": "^6.24.1", "gulp": "^3.9.1", "gulp-babel": "^6.1.2", "gulp-clean": "^0.3.2", "gulp-jshint": "^2.0.4", "gulp-livereload": "^3.8.1", "gulp-load-plugins": "^1.5.0", "gulp-plumber": "^1.1.0", "gulp-webserver": "^0.9.1" }
说明:
babel-preset-es2015 es2015转码规则
gulp-babel babel插件
gulp-jshint js检错
gulp-plumber gulp的处理错误
2.开发文件目录
3. gulpfile.js 配置
var gulp = require(‘gulp‘), $ = require(‘gulp-load-plugins‘)(); var app = { srcPath: ‘src/‘, devPath: ‘build/‘ }; gulp.task(‘js‘,function(){ return gulp.src(app.srcPath + ‘script/**/*.js‘,{base:app.srcPath}) .pipe($.plumber()) .pipe($.babel({ presets: [‘es2015‘] })) .pipe(gulp.dest(app.devPath)); }); gulp.task(‘html‘,function(){ return gulp.src(app.srcPath + ‘**/*.html‘,{base:app.srcPath}) .pipe(gulp.dest(app.devPath)); }); gulp.task(‘clean‘,function(){ return gulp.src(app.devPath) .pipe($.clean()); }); //浏览器同步 gulp.task(‘webserve‘,function(){ return gulp.src(app.devPath) .pipe($.webserver({ livereload: true, //开启gulp-livereload open: true, port: 2333 //浏览器端口 })); }); // 监听 gulp.task(‘watch‘,function(){ gulp.watch(app.srcPath + ‘script/**/*.js‘, [‘js‘]); gulp.watch(app.srcPath + ‘**/*.html‘, [‘html‘]); });
//定义gulp默认任务 gulp.task(‘default‘,[‘webserve‘,‘watch‘]);
标签:3.2 http 浏览器 png 目录 开发 插件 ref base
原文地址:http://www.cnblogs.com/liangcheng11/p/6909387.html