ES6转ES5:Gulp+Babel
目标:
- ES6代码转成ES5
- 对转换后的ES5进行压缩
- 以上步骤自动监控执行
步骤:
1.安装插件
在命令行中定位到项目根目录
安装全局 Gulp
npm install -g gulp
安装项目中使用的 Gulp
npm install --save-dev gulp 安装 Gulp 上 Babel 的插件
npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件
npm install --save-dev babel-preset-es2015 安装 Gulp 上 uglify 压缩插件
npm install --save-dev gulp-uglify
2.Gulp配置
在项目根目录新建 .babelrc ,内容为:
{
"presets": ["es2015"]
} 在项目根目录新建 gulpfile.js,内容为: var gulp = require("gulp");
var babel = require("gulp-babel"); // 用于ES6转化ES5
var uglify = require('gulp-uglify'); // 用于压缩 JS // ES6转化为ES5
// 在命令行使用 gulp toes5 启动此任务
gulp.task("toes5", function () {
return gulp.src("src/js/**/*.js")// ES6 源码存放的路径
.pipe(babel())
.pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
}); // 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('min', function() {
// 1. 找到文件
gulp.src('dist/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('min/js'))
}); // 自动监控任务
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('src/js/**/*.js', ['toes5']);
gulp.watch('dist/*.js', ['min']); });
执行:
根据 gulpfile.js 的定义,转化、压缩可以单独执行,也可以合并后自动执行。
项目目录结构:
ES6转ES5:Gulp+Babel的更多相关文章
- ES6转ES5(Babel转码器)
ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...
- ES6 初体验 —— gulp+Babel 搭建ES6环境
ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...
- 使用gulp+bebal实现前端自动化es6转es5的构建
说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码.本文介绍的就是如何手动和自动的把es6转成e ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- gulp+Babel 搭建ES6环境
Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...
- Babel 转码器 § es6转换es5
Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...
- gulp es6 转 es5
npm install --save-dev gulp-babel babel-preset-es2015 var babel = require("gulp-babel"); / ...
- 让浏览器兼容ES6语法(gulp+babel)
使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...
- ES6+转ES5(webpack+babel、指定多个js文件、自动注入)
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...
随机推荐
- centos 关闭防火墙
在centos上搭建了个服务器,本机可以访问,局域网无法访问 解决方案:关闭防火墙 sudo systemctl stop firewalld.service 令人恼火的是stop iptables之 ...
- atitit.提升备份文件复制速度(3) ----建立同步删除脚本
atitit.提升备份文件复制速度(3) ----建立同步删除脚本 1. 建立同步删除脚本两个方法.. 1 2. 1从回收站info2文件... 1 3. 清理结束在后snap比较 1 4. Npp ...
- 优化TableView性能
优化tableView性能(针对滑动时出现卡的现象) (2013-08-02 11:18:15) 转载▼ 标签: ios tableview it 分类: 技术文档 在iOS应用中,UITableVi ...
- DOS命令中的For
前几天做安装包,需要获取某个目录下所有文件夹的名字和路径.本来想用C++写段代码,后来想起DOS有可能满足需求,于是研究了一下FOR命令,竟然非常容易的达到目的,看来小看了DOS这个门口的东西. 说下 ...
- LPC43xx SGPIO DMA and Interrupts
The SGPIO output pins SGPIO14 and SGPIO15 can trigger a GPDMA request SGPIO pins SGPIO14 and SGPIO15 ...
- C#:注册机的实现【提供源代码下载】
代码下载 C#软件注册机 软件运行结果 参考文章 http://www.cnblogs.com/hanzhaoxin/archive/2013/01/04/2844191.html
- shell变量注意事项
概念:变量赋值,变量替换,变量引用,命令替换 variable=22 echo variable 可以在同一行设置多个变量.例如 va1=good va2=chif va3=beijing #需 ...
- linux中ssh可以登录sftp不能登录解决办法
我的服务器一直正常使用,平时使用secureCRT进行管理,使用secureFX进行文件的上传下载,突然有一天secureFX连接的时候出问题了,secureFX的日志如下: i SecureFX 版 ...
- linux系统date命令详解
Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel中的时钟,而硬件时钟则是主板上由电池供电的时钟, ...
- 奇怪吸引子---Thomas
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...