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.设置 ...
随机推荐
- 虚拟机锁定文件失败,开启模块snapshot失败解决办法
今天由于没有正常关闭虚拟机,导致出现打开虚拟机提示:锁定文件失败 虚拟机开启模块snapshot失败,后来从网上找打了资料解决了.解决办法:一:打开你存放虚拟机系统文件的文件夹,注意,是系统文件,不是 ...
- atitit.提升备份文件复制速度(3) ----建立同步删除脚本
atitit.提升备份文件复制速度(3) ----建立同步删除脚本 1. 建立同步删除脚本两个方法.. 1 2. 1从回收站info2文件... 1 3. 清理结束在后snap比较 1 4. Npp ...
- paip.重装系统后firefox火狐收藏夹的恢复
paip.重装系统后firefox火狐收藏夹的恢复 1.使用procmon跟踪ff保存收藏时候的读写文件.. D:\Users\attilax\AppData\Roaming\Mozilla\Fire ...
- 学习IT资源分享,欢迎各位知道的学习IT资源前来分享
1:排序不是按照名次,随机排序 慕课学习网https://www.imooc.com/ 腾讯课堂 https://ke.qq.com/ 柠檬学院 http://bjlemon.edusoho.cn/ ...
- Spring之事件发布系统
springboot应用,启动spring容器大致有如下几个过程: 容器开始启动 初始化环境变量 初始化上下文 加载上下文 完成 对应的Spring应用的启动器的监听器可以监听以上的过程,接口如下: ...
- js命名规范
- ThinkPHP中关于JS文件如何添加类似__PUBLIC__图片路径
在对html样式进行优化的时候,经常会用到Js/jquery进行一些跳转切换的样式,而我们常做的就是在Js/jquery代码中嵌url图片链接代码,以实现动态交互的页面效果. 如下图所示:
- QT on Android开发
1.安装QT 2.安装JDK 配置如下系统环境变量: JAVA_HOME D:\Java\jdk Path %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin CLASSPATH ...
- bind() live()和delegate 区别
Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不人为的设置s ...
- SVN命令模式批量更新多个项目文件
使用svn作为版本管理是,在一个仓库下边同时建立多个项目,每天上班都需要一个个更新,为了发挥程序员懒的精神,能让电脑做的,绝不手工操作.作为自动化处理,在windows环境,首先想到了bat Tort ...