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.设置 ...
随机推荐
- iOS系统app崩溃日志手动符号化
iOS系统app崩溃日志手动符号化步骤: 1.在桌面建立一个crash文件夹,将symbolicatecrash工具..crash文件..dSYM文件放到该文件夹中 a.如何查询symbolicate ...
- paip.信用卡账单处理分类bug o21
paip.信用卡账单处理分类bug o21 cmb 惠众04年度10/12 insure gdb 零售利息 itrst gdb 2013-10-5 97.5 int ...
- iOS-UIViewController视图控制器跳转界面的几种常用方法
一.最普通的视图控制器UIViewContoller 一个普通的视图控制器一般只有模态跳转的功能(ipad我不了解除外,这里只说iPhone),这个方法是所有视图控制器对象都可以用的,而实现这种功能, ...
- Linux/Unix 怎样找出并删除某一时间点的文件(转)
在Linux/Unix系统中,我们的应用每天会产生日志文件,每天也会备份应用程序和数据库,日志文件和备份文件长时间积累会占用大量的存储空间,而有些日志和备份文件是不需要长时间保留的,一般保留7天内的文 ...
- INNO安装卸载自动结束进程插件使用
[Code] //安装前判断是否有进程正在运行,istask.dll文件与打包的exe文件一起function RunTask(FileName: string; bFullpath: Boolean ...
- Resource annotation is not supported on static fields
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'paramUtil' d ...
- 转:最简单的基于 DirectShow 的视频播放器
50行代码实现的一个最简单的基于 DirectShow 的视频播放器 本文介绍一个最简单的基于 DirectShow 的视频播放器.该播放器对于初学者来说是十分有用的,它包含了使用 DirectSho ...
- 小白学数据分析----->ARPPU的误区
新年到来,该应该持续坚持写下去,还是有很多人要来学习和进步的. 今天提到了一个概念:ARPPU. 这个概念等同于之前大家认识的ARPU(其实这句话我是很不愿意说的),ARPPU是总收入除以总付费用户数 ...
- 使用json-lib进行Java和JSON之间的转换 [转]
[转] http://www.cnblogs.com/mailingfeng/archive/2012/01/18/2325707.html 1. json-lib是一个java类库,提供将Java对 ...
- mybatis 返回null 及 参数说明
'org.mybatis:mybatis:3.2.8' (会与 'org.mybatis:mybatis:3.1.1',com.mybank.tools.dialect.PaginationInter ...