gulp和babel的安装

gulp是基于node.js构建的，gulp是自动化构建工具。

在安装gulp时，应该先检测node是否安装，使用如下命令：

如果已经安装，则安装gulp

进入项目根目录

 

作为项目的开发依赖安装

检测gulp是否安装成功，添加如下代码

var gulp = require('gulp'); //引入gulp
gulp.task('abc', function() {
  // 将你的默认的任务代码放在这
    condole.log("123");
});

在cmd命令下运行任务，如 gulp abc

安装gulp-babel,babel工具是用来将es6转化为es5，首先在github上搜索gulp-babel，使用下面的命令安装babel转换器。

    npm install --save-dev gulp-babel babel-preset-env

测试环境是否搭建成功

在上述文件中添加如下代码

代码解读

var gulp = require('gulp');
var babel=require('gulp-babel');

引入gulp和babel两个模块

gulp.task('abc', function() {}); 开启一个任务

gulp.src('wj.js') .pipe(babel({ presets:['es2015'] })).pipe(gulp.dest('dist'));

gulp.src()方法需要转化的文件为wj.js，pipe(gulp.dest('dist'))指生成一个新的dist文件夹，用于存放被转化为es5的js文件

运行结果如下图所示，说明已经安装成功。

实时监控wj.js发生变化，需要添加代码如下

gulp.task("watch",['abc'],function(){
    gulp.watch('wj.js',["abc"]);
})
需要运行 gulp watch，这时如果改变es6的js代码，相应的被转化的es5的文件会自动更新。