Install

$ npm install --save-dev gulp-babel babel-preset-es2015

用法1:

const gulp = require('gulp');
const babel = require('gulp-babel'); gulp.task('default', () => {
return gulp.src('src/app.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'));
});

用法2:

在项目根路径创建文件 .babelrc。内容为

{
"presets": ["es2015"]
}

var gulp = require("gulp");
var babel = require("gulp-babel"); gulp.task("default", function () {
return gulp.src("src/**/*.js") // ES6 源码存放的路径
.pipe(babel())
.pipe(gulp.dest("dist")); // 转换成 ES5 存放的路径
});

参考文献:

【前端】在Gulp中使用Babel的更多相关文章

  1. gulp 中的增量编译

    最近花一点时间学了下 gulp,顺便学了下 sass,因为工作中并不需要用(我比较希望学习是需求驱动),所以一直拖到现在才学.突然觉得学习这类工具性价比很高,半天一天即可上手,技能树丰富了(尽管可能只 ...

  2. 前端工程师需要掌握的 Babel 知识

    在前端圈子里,对于 Babel,大家肯定都比较熟悉了.如果哪天少了它,对于前端工程师来说肯定是个噩梦.Babel 的工作原理是怎样的可能了解的人就不太多了.本文将主要介绍 Babel 的工作原理以及怎 ...

  3. 前端架构gulp与webpack(知识点整理)

    一 概念介绍 gulp 是 task runner,Webpack 是 module bundler.可以这么说, Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代,或者直接说和 ...

  4. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  5. 一个利用pojo类从前端页面request中获取参数的小框架~

    写之前不知道Spring已经实现这样的功能,所以傻傻的写了这个东西! 实现原理挺有趣的在此记录一下.从去年十月参加java开发以来自己终于有了点小进步. 好开心. 解决问题(详解):前端form表单提 ...

  6. 如何在Gulp中提高Browserify的打包速度

    使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch ...

  7. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  8. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  9. 在IDEA(phpStorm)中使用Babel编译ES6

    安装Babel 官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植.更易于安装. 在项目的根目录下使用命令行工具(CMD等)执行下面代码 n ...

随机推荐

  1. output_buffering开启

    ecshop后台出现Warning: Cannot modify header information - headers already sent by 修改完PHP.ini配置文件后,一定要重启服 ...

  2. wp8.1 页面返回 页面导航

    public The_second() public second() { this.InitializeComponent(); Frame frame = Window.Current.Conte ...

  3. Linux(Ubuntu)环境下使用Fiddler

    自己的开发环境是Ubuntu, 对于很多优秀的软件但是又没有Linux版本这件事,还是有点遗憾的.比如最近遇到一个问题,在分析某个网站的请求路径和cookie时就遇到了问题.本来Chome浏览器自带的 ...

  4. ios cell时间相同隐藏算法

  5. (转载)Resin安装配置及使用教程

    Resin是一个提供高性能的,支持 Java/PHP 的应用服务器.目前有两个版本:一个是GPL下的开源版本,提供给一些爱好者.开发人员和低流量网站使用:一种是收费的专业版本,增加了一些更加适用于生产 ...

  6. Myeclipse8.6配置android_SDK,进行android开发(转载)

    Myeclipse8.6下部署环境,总结一下个人Android环境配置的过程(首先不要急着启动Myeclipse) 1.下载SDK:http://developer.android.com/sdk/i ...

  7. UVALive 7146 Defeat the Enemy(贪心+STL)(2014 Asia Shanghai Regional Contest)

    Long long ago there is a strong tribe living on the earth. They always have wars and eonquer others. ...

  8. jquery jQuery-File-Upload 例子

    网上jquery-file-upload的例子 都过于简单,在项目中这个插件经常使用,写个例子供参考. 下面介绍 用插件实现图片异步上传的代码. 1   比要的js一个都不能少,他们之间是有依赖关系的 ...

  9. Keras学习~试用卷积~跑CIFAR-10

    import numpy as np import cPickle import keras as ks from keras.layers import Dense, Activation, Fla ...

  10. MVC中使用jquery uploadify上传图片报302错误

    使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...