首页 > 代码库 > 简单利用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自动化