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. WINDOWS下PhoneGap(Cordova)安装笔记

    1.首先下载Node.js  安装nodejs很简单直接点击安装文件下一步直至成功即可,安装notejs的同时npm也会同时安装 成功后打开notejs的命令行工具 输入“node -v”," ...

  2. centos 下pip 安装snappy 系列问题记录

    试用sud o pip提示找不到pip命令,不加sudo可以找到,这时候需要使用whereis 去看pip命令的路径 sudo + pip完整路径即可 安装python  snappy 失败提示: s ...

  3. Windowns 10打开此电脑缓慢问题的一种解决办法

    上个月刚配的台式,i7 6700K + 16GB + PM961用起来爽得不行. 不过最近两天突然发现,打开"此电脑"总会卡住,窗口里面也不显示磁盘.地址栏缓慢刷新. 一般此类问题 ...

  4. windows下mysqlbinlog二进制恢复

    Mysql数据恢复主要针对Windows游戏引擎服务器意外宕机,以及游戏出现重大BUG,导致需要回档. 注意:请在恢复数据库之前,备份目标数据库,切记! 一.Windows服务器意外DOWN机,数据库 ...

  5. Autorelease自动释放池的使用

    Autorelease自动释放池的使用 使用ARC开发,只是在编译时,编译器会根据代码结构自动添加了retain.release和autorelease. MRC内存管理原则:谁申请,谁释放 遇到al ...

  6. JQuery DOM clone(true),对于克隆对象事件触发后,处理函数中this指代克隆对象

    <!doctype html> <html ng-app> <head> <script src="./jquery.js">< ...

  7. IOS 调用系统照相机和相册

    /** *  调用照相机 */ - (void)openCamera { UIImagePickerController *picker = [[UIImagePickerController all ...

  8. linux启动时文件系统错误问题

    linux开机启动时,文件系统错误(磁盘有坏轨或文件系统出现错误)   原因:        1.系统运行时,突然断电或不正常关机,导致文件系统错误(文件系统错误并不是硬件错误,而是软件数据的问题)  ...

  9. NoSql 中Mongodb数据库的使用

    1.NoSql数据库简介 2.MongoDB数据库的简介 3.MongoDB下Windows下的安装

  10. caffe学习笔记(一),ubuntu14.04+GPU (用Pascal VOC2007训练数据,并测试)

    把源代码跑起来了,将实验过程记录如下,用于新手入门. 今天和师兄师姐才跑通,来分享下心得.(预训练网络:ImageNet_model,训练集:PASCAL VOC2007, GPU) 首先,整个tra ...