使用gulp搭建es6运行环境

es6引入很多新的语法特性,但是想要在现有浏览器环境执行,需要将ES6代码转为ES5代码,网上有很多转码器babel,traceur之类的,参考之后,使用traceur和gulp搭建es6运行环境,开始我的es6.

开始安装

首先确保电脑上安装了nodejs.
1.创建一个项目目录
2.全局安装Traceur,在控制台输入
npm install -g traceur
3.打开项目目录,安装gulp以及gulp-traceur插件
npm install -g gulp
npm install gulp gulp-traceur –save-dev
4.创建package.json文件 npm init,在项目根目录创建gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var traceur = require('gulp-traceur');

// Static Server + watching scss/html files
gulp.task('serve', ['traceur'], function() {
    browserSync.init({
     server: "./"
     });

    gulp.watch("build/**/*.js", ['traceur']);

});

gulp.task('traceur', function(){
    return gulp.src('build/*.js')
        .pipe(traceur({exprimental: true}))
        .pipe(gulp.dest('js'));
});

gulp.task('default', ['serve']);

　　

5.运行 gulp,当使用es6语法书写的build文件夹中的内容有变化时,traceur task执行,同时使用了browser-sync使浏览器实时响应文件更改（html、js、css、sass、less等）并自动刷新页面。
6.开始es6的使用.

 

参考文章
1.WebStorm中使用ES6的几种方式（http://www.cnblogs.com/darrenji/p/4997045.html）
2.browser-sync（http://www.browsersync.cn/）。

转载于:https://www.cnblogs.com/lilycn/p/5702213.html