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. LL(1)文法

    <源程序>→<外部声明>|<外部声明><函数体> <外部申明>→<头文件><函数声明>|其他声明 <函数体&g ...

  2. Stack的c实现

    用c语言实现stack的初始化,push,pop和Clear操作 #include<stdio.h> #include<stdlib.h> #include<assert ...

  3. 前台获取Dropdownlist选中的text

    $("#ddltest").find("option:selected").text()

  4. LeetCode Add Two Numbers II

    原题链接在这里:https://leetcode.com/problems/add-two-numbers-ii/ 题目: You are given two linked lists represe ...

  5. web前端开发和后端开发有什么区别?

    web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...

  6. npm总结

    1.npm install -g 模块               全局安装                 2.npm install 模块@version      安装具体摸个版本的模块     ...

  7. git操作的常用命令

    git remote show origin 查看git远程信息git remote set-url origin git@gitlab.staff.xdf.cn:woxue/woxueadmin.g ...

  8. css3水波纹效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. mysqlbinlog 查看binlog时报错unknown variable 'default-character-set=utf8'

    mysqlbinlog --no-defaults mysql-bin.000003 > /home/3.sql 下侧文字转自 http://www.cnblogs.com/cobbliu/p/ ...

  10. debian bcm43* 无线网卡驱动

    deb http://httpredir.debian.org/debian/ jessie main contrib non-free # apt-get update# apt-get insta ...