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 ...
随机推荐
- 网络编程api总结
1.socket函数创建一个socket连接,此时该socket连接为主动式. fd(int)->fd(struct fd)->file->sock:sock->file 2. ...
- rails4 ckeditor 的部署以及 中文化
首先ckeditor 要基于paperclip 之后paperclip 需要你在linux 下安装 ImageMagick 具体安装可参考http://my.eoe.cn/guanmac/arc ...
- [一点一滴.NET]进程和线程的区别
进程是“执行中的程序”,是一个动态的概念.我们使用IDE编写的程序是静态的,静态程序经过编译形成EXE文件,运行起来之后就形成了一个进程.进程不仅仅是程序的代码,还包含了程序运行时的活动信息,通常由程 ...
- HDU 5592——ZYB's Premutation——————【线段树单点更新、单点查询】
ZYB's Premutation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Othe ...
- Day6上 括号匹配专项
滑稽的题 T1 #include<iostream> #include<cstring> #include<queue> #include<algorithm ...
- dreamweaver,access2010,数学
dreamweaver 1,点插入-表格-设置表格. 2,再次修改表格,打开属性修改指标. (修改图片时,也可以选中图片打开对应的属性修改) 设置字体: 1,打开属性-页面属性,弹出操作窗口,设置想改 ...
- Java反射破坏单例模式
今天电话面试的时候问到了,Google了一下 原出处: http://blog.csdn.net/lws332969674/article/details/8125893 一. Java中的反射技术可 ...
- MySQL慢查询分析工具pt-query-digest详解
一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...
- JS在与lua的交互心得
最近在写一个项目,前端技术使用的是Vue,在与lua的交互过程,是通过一个公共JS,前端调用公共js的方法给lua发送命令,lua接到命令,去执行一些方法,然后又通过回调返回到了前端,由于是第一次写这 ...
- css中的伪元素,我今天记住了!o~yeah
对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中.带着 ...