目标:

  1. ES6代码转成ES5
  2. 对转换后的ES5进行压缩
  3. 以上步骤自动监控执行

步骤:

  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的更多相关文章

  1. ES6转ES5(Babel转码器)

    ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...

  2. ES6 初体验 —— gulp+Babel 搭建ES6环境

    ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...

  3. 使用gulp+bebal实现前端自动化es6转es5的构建

    说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码.本文介绍的就是如何手动和自动的把es6转成e ...

  4. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  5. gulp+Babel 搭建ES6环境

    Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...

  6. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  7. gulp es6 转 es5

    npm install --save-dev gulp-babel babel-preset-es2015 var babel = require("gulp-babel"); / ...

  8. 让浏览器兼容ES6语法(gulp+babel)

    使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...

  9. ES6+转ES5(webpack+babel、指定多个js文件、自动注入)

    接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...

随机推荐

  1. centos 关闭防火墙

    在centos上搭建了个服务器,本机可以访问,局域网无法访问 解决方案:关闭防火墙 sudo systemctl stop firewalld.service 令人恼火的是stop iptables之 ...

  2. atitit.提升备份文件复制速度(3) ----建立同步删除脚本

    atitit.提升备份文件复制速度(3) ----建立同步删除脚本 1. 建立同步删除脚本两个方法.. 1 2. 1从回收站info2文件... 1 3. 清理结束在后snap比较 1 4. Npp  ...

  3. 优化TableView性能

    优化tableView性能(针对滑动时出现卡的现象) (2013-08-02 11:18:15) 转载▼ 标签: ios tableview it 分类: 技术文档 在iOS应用中,UITableVi ...

  4. DOS命令中的For

    前几天做安装包,需要获取某个目录下所有文件夹的名字和路径.本来想用C++写段代码,后来想起DOS有可能满足需求,于是研究了一下FOR命令,竟然非常容易的达到目的,看来小看了DOS这个门口的东西. 说下 ...

  5. LPC43xx SGPIO DMA and Interrupts

    The SGPIO output pins SGPIO14 and SGPIO15 can trigger a GPDMA request SGPIO pins SGPIO14 and SGPIO15 ...

  6. C#:注册机的实现【提供源代码下载】

    代码下载 C#软件注册机 软件运行结果 参考文章 http://www.cnblogs.com/hanzhaoxin/archive/2013/01/04/2844191.html

  7. shell变量注意事项

    概念:变量赋值,变量替换,变量引用,命令替换 variable=22 echo variable 可以在同一行设置多个变量.例如 va1=good   va2=chif va3=beijing  #需 ...

  8. linux中ssh可以登录sftp不能登录解决办法

    我的服务器一直正常使用,平时使用secureCRT进行管理,使用secureFX进行文件的上传下载,突然有一天secureFX连接的时候出问题了,secureFX的日志如下: i SecureFX 版 ...

  9. linux系统date命令详解

    Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel中的时钟,而硬件时钟则是主板上由电池供电的时钟, ...

  10. 奇怪吸引子---Thomas

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...