1.安装gulp
  npm install gulp

2.得到package.json文件
  npm init

2.全局安装Babel。
 npm install -g babel-cli  
  npm install -g babel-cli --save-dev

3.Babel的配置文件是.babelrc ,windows下新建该文件会提示必须键入文件名,解决办法是文件名如下.babelrc.

4.ES2015转码规则
  npm install --save-dev babel-preset-es2015

5.将规则加入到.babelrc文件中    
    {  
        "presets": [  
          "es2015" 
        ],  
        "plugins": []  
      }

6.配置工具

6.1 安装gulp-babel
      npm install --save-dev gulp-babel
  
  6.2 配置gulpfile.js文件

var gulp = require("gulp");  
      var babel = require("gulp-babel");  
      
      gulp.task("default", function () {  
        return gulp.src("src/a.js")  
          .pipe(babel())  
          .pipe(gulp.dest("lib"));  
      });

6.3实时转码
     安装gulp-watch
     npm install --save-dev gulp-watch

配置gulpfile文件
     var gulp = require("gulp"),  
          babel = require("gulp-babel"), 
         watch = require("gulp-watch");  
      
     gulp.task("babeljs", function () {  
       return gulp.src("www/js/*.js")  
         .pipe(babel())  
         .pipe(gulp.dest("dist/js"));  
     });  
     gulp.task("watch",function(){
        gulp.watch('www/js/*.js',['babeljs']);
     })

gulp.task('default',['watch','babeljs']);

7.配置完成,运行实现转码
   gulp

gulp+babel 实时转es6的更多相关文章

  1. 使用gulp和bable实现实时编译ES6代码

    这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...

  2. gulp+Babel 搭建ES6环境

    Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...

  3. 让浏览器兼容ES6语法(gulp+babel)

    使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...

  4. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  5. gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

    gulp + gulp-better-rollup + rollup 构建 ES6 开发环境 关于 Gulp 就不过多啰嗦了.常用的 js 模块打包工具主要有 webpack.rollup 和 bro ...

  6. 关于webpack,babel,以及es6和commonJS之间的联系(转)

    add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...

  7. ES6转ES5:Gulp+Babel

    目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...

  8. ES6 初体验 —— gulp+Babel 搭建ES6环境

    ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...

  9. Gulp Babel AMD转换例子

    1.gulpfile.js var gulp = require('gulp'); const babel = require('gulp-babel'); gulp.task('default', ...

随机推荐

  1. PyCharm 格式化代码 常用快捷键

    ctrl+alt+L 一 常用快捷键 编辑类:Ctrl + D             复制选定的区域或行Ctrl + Y           删除选定的行Ctrl + Alt + L     代码格 ...

  2. Vue 表情输入组件,微信face表情组件

    VUE表情包输入组件,先来张成品图看看. 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧. 注意: 1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址 ...

  3. 并不对劲的2-SAT

    说明 板板题链接 这个人讲得很清楚 WAWAWAWA 建的边"不完整",比如当限制是"x为1时y一定为1"时,连x->y的边时,忘记连y'->x'的 ...

  4. C#选择文件保存路劲

    private void button8_Click(object sender, EventArgs e) { FolderBrowserDialog dialog = new FolderBrow ...

  5. 修改NPM默认全局安装路径

    场景: 最近在新电脑上鼓捣完环境后,打算切换下源,结果使用全局安装的nrm时提示找不到命令,之前都是这么用现在怎么不行了呢? 排查过程: 于是各种折腾,发现- g安装的插件目录在C盘中的某个路径中,后 ...

  6. linux mint 安装xshell

    之前在Windows上进行开发的时候,SSH重度依赖SecureCRT或者XShell工具,现在把办公环境迁移到Linux后,每次连接都需要输入密码,尤其是需要跳板机的时候,需要逐级输入,十分麻烦.所 ...

  7. day09 并发编程

    一. 目录 1.进程的概念和两种创建方式 2.多进程爬虫 3.守护进程 4.进程队列 5.进程队列简单应用(实现数据共享) 6.线程的两种创建方式 7.线程和进程的效率对比 8.线程共享统一进程的数据 ...

  8. 【3】Zookeeper中的角色

    一.Zookeeper角色的分类 领导者(leader) Leader服务器为客户端提供读服务和写服务. 学习者(learner) 跟随者(follower) Follower服务器为客户端提供读服务 ...

  9. multiple类型的select option在django后台如何取值

    之前前端的select都是单选类型,在新的场景中允许用户选择多个条件, 前端的代码如下: <form action="{% url 'info:result-list' %}" ...

  10. IPC之ipc_sysctl.c源码解读

    // SPDX-License-Identifier: GPL-2.0-only /* * Copyright (C) 2007 * * Author: Eric Biederman <ebie ...