首先，我们创建一个简单的应用，它包含一个index.html和es6目录，es6目录中又包含hello.es6和main.es6两个文件，在构建完成后，会多出js和bundle两个目录，分别放置编译后的JS代码和打包后的bundle文件：
其中，hello.es6定义了greet函数，而main.es6是入口文件，下面是相关的代码：
//hello.es6 function greet(name) { return new Promise((resolve, reject) => { setTimeout(() => { resolve('hello ' + name); }, 1000); }); } exports.greet = greet;
//main.es6 import "babel-polyfill"; import {greet} from './hello'; greet('Scott').then((greeting) => { document.getElementById('container').innerHTML += greeting; }); document.getElementById('container').innerHTML = 'I am greeting: ';
可以看到，hello.es6中使用了ES6的箭头函数和Promise来定义一个greet函数，模拟1秒后返回一个hello开头的字符串，而main.es6中引入了hello.es6并调用了greet函数，最后将结果刷新到DOM元素中。
要使这两个源代码文件生效，首先需要把它们编译成JS，然后再将JS文件打包，现在我们就来使用gulp的方式构建这个过程。
要完成这个任务，我们需要先安装相关的依赖包：
"devDependencies": { "babel-polyfill": "^6.9.1", "babel-preset-es2015": "^6.6.0", "gulp": "^3.9.1", "gulp-babel": "^6.1.2", "gulp-browserify": "^0.5.1", "gulp-connect": "^3.2.2", "gulp-rename": "^1.2.2", "gulp-sync": "^0.1.4", "gulp-uglify": "^1.5.3" }
其中，babel-polyfill是ES6的补丁，由于babel只支持ES6语法部分的编译，对于新增的类我们还需要安装额外的polyfill，虽然现在Chrome和Firefox都已经添加了Promise等新增的类，但为了兼容旧版本的浏览器，这里还是安装比较好。
然后，我们就创建几个简单的tasks，下面是gulpfile.js的代码：
var gulp = require('gulp'); var babel = require('gulp-babel'); var connect = require('gulp-connect'); var browserify = require('gulp-browserify'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var gulpsync = require('gulp-sync')(gulp); gulp.task('compile-es6', function() { return gulp.src('app/es6/*') .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('app/js')); }); gulp.task('pack-js', function() { return gulp.src('app/js/main.js') .pipe(browserify()) .pipe(rename('bundle.js')) .pipe(gulp.dest('app/bundle')); }); gulp.task('compress-bundle', function() { return gulp.src('app/bundle/bundle.js') .pipe(uglify()) .pipe(rename('bundle.min.js')) .pipe(gulp.dest('app/bundle')); }); //build source files to released bundle file gulp.task('build', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']), function() { if (process.argv.pop() == '--dev') { //watch any change and then re-run the tasks gulp.watch('app/es6/*', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle'])); } }); //run a server listening at port 8000 gulp.task('server', function() { connect.server({ root: 'app', port: 8000, livereload: true }); });
最后，只需在命令行中执行两个命令就可以了：
gulp build --dev
gulp server
第一个命令我们是指定了开发模式，开发模式会监听es6目录中的文件改动，并重新构建；而第二个命令是用来启动一个服务，在8000端口监听。
上面的项目已放到Github上，感兴趣的同学可以去看一下，也可以克隆到本地亲自试一试。
github地址：https://github.com/scottliu2011/es6-dev
本地下载地址：(jb51.net).rar
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: