ES6 初体验 —— gulp+Babel 搭建ES6环境
ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做。最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用ES6,一方面积累一些经验为大型项目做准备。另一方面小型的活动专题不涉及后期维护,从成本上我并没有冒太大的风险。下面我简单介绍一下我搭建的ES6 环境。
虽然移动平台是webkit大行其道,并且webkit对ES6支持的还不错,但是我并不打算webkit内核裸跑ES6。我选择了预编译的方案——babel ,我编写的是ES6的代码,但是页面上仍然是ES5的代码。在网上查阅了不少文章结合我现在的开发环境我打算使用gulp-babel这个插件。下面我们一起来看一下:
需要哪些依赖?
下面是我的package.json中的devDependencies 属性:
"devDependencies": {
"babel-preset-es2015": "^6.5.0",
"gulp-load-plugins": "^1.1.0",
"gulp-babel": "^6.1.2",
"gulp-plumber": "^1.0.1",
"gulp-rename": "^1.2.2",
"gulp": "^3.9.1",
"gulp-jshint": "^2.0.0",
"gulp-concat": "^2.6.0",
"gulp-uglify": "^1.4.1",
"gulp-util": "^3.0.1"
}
npm install 后我们就可以看到我们的依赖都安装到了工程文件夹下面。
怎么配置?
然后是在gulp中做ES6的配置了gulpfile.js 。 我定义了一个名为“es6”的任务负责将目录src/es6js/ 下面所有的js文件通过babel编译成ES5的文件并输出到dist/ztimages 文件夹下面
var gulp = require('gulp'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'); // Load plugins
var $ = require('gulp-load-plugins')(); /* es6 */
gulp.task('es6', function() { return gulp.src('src/es6js/*.js')
.pipe($.plumber())
.pipe($.babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist/ztimages/'));
});
我们有了任务,但是怎么执行任务呢? 在命令行工程目录下输入gulp es6 就可以执行这个任务了。但是我们不能每写一行代码就手动“执行”一下。这样也太麻烦了。我们可以配置一个监听任务。
//监听文件修改
gulp.task('watch', ['es6'], function() {
gulp.watch(['src/js/earth.js'], ['es6']);
});
类似的我们也可以加入LESS的文件监听。
在命令行工程目录下输入gulp watch就可以执行这个监听任务了。
总结:
这样一个简单的ES6环境就搭建好了。当然还有好多其他的方法,我仅仅先介绍一个比较容易上手的方法给大家。
ES6 初体验 —— gulp+Babel 搭建ES6环境的更多相关文章
- gulp+Babel 搭建ES6环境
Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...
- Helm Template初体验,方便管理多环境
我最新最全的文章都在南瓜慢说 www.pkslow.com,文章更新也只在官网,欢迎大家来喝茶~~ 1 简介 Helm作为一个优秀的包管理器,这部分我们之前已经做了介绍,文章如下: 用Helm部署Ku ...
- ES6初体验
开始学习ES6,打算走全栈这条路了,废话不多说,开始吧. 首先安装node环境,去node官网上面下载node最新版本的,我用的系统是window10,所以我只需要下一步下一步就行了,安装完成后打开c ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- Ubuntu下Django初体验(一)——开发环境搭建
一.开发 环境搭建 1. linux下一般有自带的python,如果对版本不满意,可以再自行安装. 2. 安装ipython(推荐) sudo apt-get install ipython sudo ...
- 让浏览器兼容ES6语法(gulp+babel)
使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...
- ES6学习(一)搭建环境
作为一名后端小开发,业务工作需要将后台系统重构一番,许多同事都已经使用前后分离搭建项目,为了不拖后腿自己在家摸索ES6的新特性,真心不知道什么ES3,ES5,一上来就开始搞ES6,在此留下学习笔记,方 ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- 全分布式的Hadoop初体验
背景 之前的时间里对 Hadoop 的使用都是基于学长所搭建起的实验环境的,没有完整的自己部署和维护过,最近抽时间初体验了在集群环境下装机.配置.运行的全过程,梳理总结到本文中. 配置 内存:8G C ...
随机推荐
- spring整合jpa
有点类似SSH整合,O(∩_∩)O哈哈~ <?xml version="1.0" encoding="UTF-8"?> <beans xmln ...
- Webstrom 中写Vue没有代码提示如何解决?
1. 如果你的Webstorm是2017版的,请更新到最新的2018,2018版本的webstorm自带了vue插件 找到 Help > About,查看你的Webstorm版本 2. 如果你的 ...
- windows环境搭建禅道项目管理工具
zentao官网的几个网址 http://www.zentao.net/ http://www.zentao.net/article-view-79863.html 搭建环境需要下载两个文件 1) ...
- layui upload封装
<link rel="stylesheet" href="layui/css/layui.css"> <script src="js ...
- 数据库mysql基础语言--各模式的含义
1. 欢迎信息 欢迎来到 MySQL 镜像.命令以 ; 或 g 结束.你的 MySQL 连接编号为 2.服务器版本:5.1.47-社区 MySQL 社区服务器(GPL) 版权(C)2000.2010, ...
- Kudu的概念术语
不多说,直接上干货! Columnar Data Store(列式数据存储) Kudu 是一个 columnar data store(列式数据存储).列式数据存储在强类型列中.由于几个原因,通过适当 ...
- springCloud 概念介绍
微服务(Microservice) 那么首先介绍下微服务.微服务英文名称Microservice,Microservice架构模式就是将整个Web应用组织为一系列小的Web服务.这些小的Web服务可以 ...
- MyEclipse项目中的文件点击右键Team选项中没有提交到SVN中的选项是怎么回事
MyEclipse项目中的文件点击右键Team选项中没有提交到SVN中的选项是怎么回事 其实你已经可以百度到很多方法: 例如下面博客提供的 http://www.xuebuyuan.com/95285 ...
- [转]Asp.net Core中使用Session
本文转自:http://www.cnblogs.com/sword-successful/p/6243841.html 前言 2017年就这么悄无声息的开始了,2017年对我来说又是特别重要的一年. ...
- 网站架构:消息队列 Java后端架构
2017-01-13 一.消息队列概述 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题.实现高性能,高可用,可伸缩和最终一致性架构.是大型分布式系统不可缺少的中间 ...