这篇文章的基础是基于我的上一篇文章来写的，所以如果你没有看过上一篇文章，建议你先看一遍，对于本次项目的结构和整体把握有个大概的了解，下面是上一篇文章的链接：
http://www.jianshu.com/p/09faa7abdb13
上一篇文章我们已经能够打包一个完整的项目了，但是随着现在es6（可能马上7了）越来越火，那么我想要在gulpfile.js和项目的js文件中使用es6语法，基于这个讨论，对上一次的demo进行相对应的修改；
首先我们的任务很明确，依然是启动本地服务器，修改原文件能够让打包文件进行修改，并且针对需要进行es6的js文件进行编译，而不需要进行es6语法编译的则是普通的打包压缩即可；
首先我们来解决在gulpfile.js文件中使用es6语法：
这里的主要操作步骤为：
1、安装插件：babel-core和babel-present-es2015（写过webpack的人都知道，babel编译es5）；
cnpm install --save-dev babel-core babel-present-es2015；
2、根目录下创建文件：.babelrc 文件 文件名就叫.babelrc，并且写入{presets：["es2015"]}
3、更改gulpfile.js 文件名为 gulpfile.babel.js
以上就可以在gulpfile.babel.js中运行es语法；
第二步 我们需要在js文件中实施这种es6的写法，并且通过各种插件编译为浏览器可识别的js代码；
1、安装插件：browserify、vinyl-source-stream、babelify和event-stream（别问我这些插件都是什么，如果有兴趣自己去npm官网查介绍）
2、在gulpfile.babel.js文件中进行任务的写入，因为能够使用es6语法，因此我们使用import 来导入插件；
import browserify from "browserify";
import babelify from "babelify";
import source from "vinyl-source-stream";
import es from "event-stream";
import uglify from 'gulp-uglify';
3、注册任务
对于这个任务我们一步一步进行解答，首先entries是需要进行es6打包的文件的文件位置以及输出位置，其中entry为入口，source为输出位置，很明显 我们需要打包src目录下的js/es6文件夹中的两个文件page.js和index.js
map方法，是循环遍历，并且能够返回改变后的给新数组，中间那一大串就是为了编译es6并且把它输出到dist/js/中去
最后使用event-stream插件把这些任务给整合在一起 进行任务执行；
注册完这个任务之后，当然是让他执行，把它放到default任务中（怎么放，就不需要我教了吧？）
如果进行到这一步没有任何问题，那么接下来我们还有一个问题就是 怎样才能让打包好的这些被编译后的文件进行压缩呢？
继续加任务
gulp.task("ug_es6",function(){
gulp.src('./dist/js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js'));
})
正常来说是这样写的，但是我们需要考虑一个问题，就是任务的先后顺序的问题，按照正常的逻辑肯定是es6任务执行完之后再执行ug_es6任务，但是如果你直接这样写，程序肯定不会管你谁先执行的，因为gulp是异步的，但是解决这个问题也很简单，那就是加一个参数
gulp.task("ug_es6",["es6"],function(){
gulp.src('./dist/js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js'));
})
加一个["es6"] 的意思就是只有在es6任务完成后才会执行这个任务
继续添加到default中
附加一个好玩的插件：gulp-load-plugins（模板管理插件，让你不需要每次都加载那么多的插件，具体用法可以百度慢慢查）
附加本次的git地址（依然是上次那个，略作修改）：https://github.com/XH-chen/gulp-test-demo.git
网友评论