gulp自动化ES6转ES5
- npm install --save-dev gulp
- npm install --save-dev gulp-babel
- npm install --save-dev babel-preset-es2015
gulp配置如下:
- var gulp = require("gulp");
- var babel = require("gulp-babel");
- gulp.task("default", function () {
- return gulp.src("js**/*.js")// ES6 源码存放的路径
- .pipe(babel({
- presets: ['es2015']
- }))
- .pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
- });
ES6列子:
- let [foo, [[bar], baz]] = [1, [[2], 3]];
- console.log(foo);
- console.log(bar);
- console.log(baz);
转换后的es5:
- "use strict";
- var foo = 1,
- bar = 2,
- baz = 3;
- console.log(foo);
- console.log(bar);
- console.log(baz);
gulp自动化ES6转ES5的更多相关文章
- 使用gulp+bebal实现前端自动化es6转es5的构建
说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码.本文介绍的就是如何手动和自动的把es6转成e ...
- ES6转ES5:Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- gulp es6 转 es5
npm install --save-dev gulp-babel babel-preset-es2015 var babel = require("gulp-babel"); / ...
- 前端gulp自动化构建配置
为了节省http请求次数.节约带宽,加速页面渲染速度,达到更好用户体验的目的.现在普遍的做法是在上线之前做静态资源的打包构建,也就是静态资源的合并压缩: 这里使用的是gulp,当然现在有更强大的模块化 ...
- 使用gulp 进行ES6开发
使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的 ...
- es6转es5
一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...
- webpack es6 to es5支持配置
1. 安装webpack npm install webpack --save-dev 2. 安装babel 实现 ES6 到 ES5 npm install --save-dev babel-co ...
- gulp自动化压缩合并、加版本号解决方案
虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 ...
随机推荐
- js replace 如何替换字符串中的最后一个匹配项
1.正则表达时,贪婪模式,.*会一直匹配到最后一个 // 验证 let str = "123[空]345[空]789[空]0"; let res = str.replace(/(. ...
- workflow中的‘非典型’自动触发器trigger_model
Openerp中workflow的设计机制 工作流程系统在OpenERP里是非常有用的机制,可以用于即时描述单据(模型)状态的演进过程.工作流实现了状态流转的可配置,通过迁移的 condition代替 ...
- Stage3d 由浅到深理解AGAL的管线vertex shader和fragment shader || 简易教程 学习心得 AGAL 非常非常好的入门文章
Everyday Stage3D (一) Everyday Stage3D (二) Triangle Everyday Stage3D (三) AGAL的基本概念 Everyday Stage3D ( ...
- CentOS 6.5上使用gdb调试时出现Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.132.el6.i686 .
在CentOS6.5上用gdb调试时提示Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.132.el6.i686先修改 ...
- extends android.view.ViewGroup两种实现
/* private int measureHeight(int heightMeasureSpec) { int count = getChildCount(); ...
- js replaceChild
//父亲元素.replaceChild(新,旧) 1 <ul id="city"> <li id="bj">北京</li> ...
- [转载]SVN权限设置具体实例
原文地址:SVN权限设置具体实例作者:白菜豆腐 1 背景假设 厦门央瞬公司是一家电子元器件设备供应商,其中有个ARM部门,专门负责ARM芯片的方案设计.销售,并在北京.上海各设立了一个办事处.对于 ...
- BasicAuth和OAuth
参考资料 百度百科BasicAuth 维基百科OAuth BasicAuth基本授权 BasicAuth又叫HttpAuth,它非常简单.例如你访问一个页面时,会弹出用户名密码框 它的优点是:简单,只 ...
- 使用 HTML5 History 新特性增强 Ajax 的体验(转)
一. 场景再现 如大家熟知,Ajax 可以实现页面的无刷新操作,但会造成两个与普通页面操作(有刷新地改变页面)有着明显差别的问题—— URL 没有修改以及无法使用前进.后退按钮.例如常见的 Ajax ...
- (转)Stack Overflow 2016最新架构探秘
这篇文章主要揭秘 Stack Overflow 截止到 2016 年的技术架构. 首先给出一个直观的数据,让大家有个初步的印象. 相比于 2013 年 11 月,Stack Overflow 在 20 ...