首页 > 代码库 > 简单利用gulp搭建es6自动化
简单利用gulp搭建es6自动化
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‘]);
简单利用gulp搭建es6自动化
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。