目标：

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 的定义，转化、压缩可以单独执行，也可以合并后自动执行。

项目目录结构：

转载于:https://www.cnblogs.com/yinluhui0229/p/5566390.html

ES6转ES5：Gulp+Babel相关推荐

es5直接引入html文件,ES6+转ES5（webpack+babel、指定多个js文件、自动注入）
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 一.新建项目,目录如下二.执 ...
gulp之ES6转ES5
导读默认的gulp打包编译,是不支持es6语法,所以我们需要引入babel进行转换编译步骤 1.安装es6转es5所需要的所有npm依赖包 //babel 依赖的包但是看babel官方说并没有依 ...
将ES6的语法转为ES5（为了兼容 ES5） (Babel)
掌握 ES6 之后,如果你的业务需要考虑 ES5 的兼容性,则可以这样做:写 ES6 语法的 js 代码,然后通过 Babel将 ES6 转换为 ES5.如果没有这样的需要,那么下面的内容,了解即可. ...
ES6代码转为ES5代码babel在线转换
ES6代码转为ES5代码babel在线转换 es6转es5还是很有用的.有的时间项目不大,不用配置webpack,就是个单页文件,又想用es6语法,写完可以直接转换一下就OK了.快捷方便. https ...
babel ES6 转换 ES5 实现原理
babel ES6 转换 ES5 实现原理前言 babel 各种包介绍转换过程案例前言前面写过一篇简单的 AST 抽象语法树的文章简述 AST 抽象语法树.今天来看一下在 babel 中是 ...
本地实现ES6转ES5代码——gulpfile配置文件
公司里很多同事在用ES6实现业务逻辑了,我也想试试.在公司的项目里,我写的ES6只要打开命令窗输入gulp watch 就自动将ES6转成ES5并放在相应的文件夹里了.我回家也想练习,但又不知道该怎么 ...
es6 ik分词热更新MySQL_rollup环境搭建（es6转es5、压缩、本地服务器、热更新）
文件目录 package.json { "name": "my-vue", "version": "1.0.0", &q ...
webpack打包ES6降级ES5
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性. 安装babel实现ES6到ES5 npm instal ...
使用webpack将ES6转化ES5， Browerify
npm install --save-dev babel-loader @babel/core @babel/preset-env 生成 .babelrc文件 { "presets" ...

ES6转ES5：Gulp+Babel

目标：

步骤：

1.安装插件

`2.Gulp配置`

执行：

项目目录结构：

ES6转ES5：Gulp+Babel相关推荐

最新文章

热门文章