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

参考文章

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

需要注意:

1、有可能提示没有安装browser-sync,我是翻墙安装的没有翻墙的时候安装了半天没有成功,翻墙之后瞬间OK。

前端 - 使用gulp搭建es6运行环境的更多相关文章

  1. 搭建ES6运行环境

    当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内, ...

  2. 构建前端第8篇之---Webstom搭建ES6运行环境

    张艳涛 写于2021-1-22 一.在有webstorm和node.js前提下,安装全局的babel npm install babel-cli babel-eslint -g 二.在terminal ...

  3. Windows7下搭建Django运行环境

    一直都是在Linux环境下搭建django的运行环境,开学因为需要叫前端的同学帮忙修改模板,所以需要在Windows下搭建起运行环境,想来PHP倒是有不少集成开发环境,Python倒是少的可怜…只在w ...

  4. 利用gulp搭建less编译环境

       什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, ...

  5. 使用gulp搭建less编译环境

    什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Fi ...

  6. 9款一键快速搭建PHP运行环境的好工具

    9款一键快速搭建PHP运行环境的好工具 胡倡萌 2011/02/19 网络资源 77,063 1     内容提要: 建立一个PHP网站,首先需要搭建PHP的开发和运行环境,对于PHP初学者也是一个难 ...

  7. 漫游Kafka实战篇之搭建Kafka运行环境

    接下来一步一步搭建Kafka运行环境. Step 1: 下载Kafka 点击下载最新的版本并解压. > tar -xzf kafka_2.9.2-0.8.1.1.tgz > cd kafk ...

  8. 【PHP】linux搭建PHP运行环境

    之前在windows下写了hello world,终归是不够用啊,因为开发环境是Linux,怎么办呢~~~学习学习再学习 写在前面的话:我从百度文库的一个文章里摘出来的,原文章名称<Linux下 ...

  9. Centos7安装Docker 基于Dockerfile 搭建httpd运行环境

    Centos7安装Docker 基于Dockerfile 搭建httpd运行环境 docker docker搭建 docker build 本文档完成目标内容如下 使用Docker搭建http服务器一 ...

随机推荐

  1. POJ2586——Y2K Accounting Bug

    Y2K Accounting Bug   Description Accounting for Computer Machinists (ACM) has sufferred from the Y2K ...

  2. CVE漏洞爬虫java代码依赖-TestNG

    TestNG是Java中的一个测试框架,而该CVE漏洞爬虫示例中所涉及到的java代码中, \Crawler\src\com\***\ThreaderRun.java文件在导入import org.t ...

  3. 基于redis实现的分布式锁

    基于redis实现的分布式锁 我们知道,在多线程环境中,锁是实现共享资源互斥访问的重要机制,以保证任何时刻只有一个线程在访问共享资源.锁的基本原理是:用一个状态值表示锁,对锁的占用和释放通过状态值来标 ...

  4. node.js 模块之url和querystring模块

    关系如下: url.parse(string).query | url.parse(string).pathname | | | | | ------ ------------------- http ...

  5. JSON 之JAVA 解析

    一.   JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. Json建构于两种结构:     1.“名称/值”对的集合(A collection ...

  6. poj 3009 Curling 2.0( dfs )

    题目:http://poj.org/problem?id=3009 参考博客:http://www.cnblogs.com/LK1994/ #include <iostream> #inc ...

  7. uyouo[]常棒的一篇关于innnodb next-key lock的文章

    何登成的 MySQL 加锁处理分析 Innodb锁机制:Next-Key Lock 浅谈

  8. mvc 相关js

    http://modernizr.com/ https://github.com/Modernizr/Modernizr/wiki 主要看下Polyfills 用于html5,用于一些老ie,fire ...

  9. 设计模式 - command

    将请求封装为对象,从而可以使用不同的请求对客户进行参数化,该模式的关键在于对不同请求的封装.简单的说,也就是在请求发出者和客户间通过command对象进行解耦,从而使得请求者可以通过实例化不同的com ...

  10. JS 动态显示 获取下拉框的多个值

    <script type="text/javascript"> function GetProcessVal(i, t) { document.getElementsB ...