首页 > 其他 > 详细

使用gulp搭建es6运行环境

时间:2016-07-25 08:07:45      阅读:433      评论:0      收藏:0      [点我收藏+]

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/)。

使用gulp搭建es6运行环境

原文:http://www.cnblogs.com/lilycn/p/5702213.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!