gulp-babel使用

iszjw

　　各大浏览器厂商对es2015功能支持不完全,等到全部支持会等很长时间,如果现在使用es2015,可以选择babel一个将ES6/ES7写的代码转换为ES5代码的编译器.
　　我们选择使用gulp自动化编译生成es5代码.
　　假设你已经安装过了nodejs.
　　配置开发环境:
　　1. 建立工程目录:  



$mkdir test && cd test
　　2. 新建工程配置文件package.json



$npm init
　　3. 安装gulp工具



$npm install --save-dev gulp gulp-babel gulp-concat gulp-sourcemaps babel-preset-es2015
　　4. 新建gulp配置文件



$vim gulpfile.js
　　写入代码gulpfile.js:





const gulp = require("gulp");
const sourcemaps = require("gulp-sourcemaps");
const babel = require("gulp-babel");
const concat = require("gulp-concat");

gulp.task('default', () =>
gulp.src('src/**/*.js')
.pipe(babel({
presets: 'es2015'
}))
.pipe(gulp.dest('dist'))
);

//生成sourcemaps


gulp.task('all', () =>
gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel({
presets: 'es2015'
}))
.pipe(concat('all.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
);
View Code 　　5. 测试是否配置成功



mkdir src && cd src && vim app.js
　　写入代码:





function f() {
let x;
{
// okay, block scoped name

const x = "sneaky";
// error, const
//x = "foo";

console.log(x);
}
// okay, declared with `let`

x = "bar";
// error, already declared in block
//let x = "inner";

console.log(x);
}

f();
View Code　　6.执行



$gulp
　　会自动生成dest目录,包含app.js文件,是转化过的js.恭喜你已经学会!