简单利用gulp搭建es6自动化

Posted 2020-09-20

es6是什么？借着这个话题，我想说：身为web前端的工作者连es6没听说，转行吧。

demo的代码如下：

源码下载 或者 gitclone地址： [email protected]: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‘]);