gulp+Babel 搭建ES6环境
Gulp是什么?
Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件(当然这些只是一小部分例子)。
Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如,有些插件可以用来执行JSHint、编译CoffeeScript,执行Mocha测试,甚至更新版本号。
对比其他构建工具,比如Grunt,以及最近流行的Broccoli,我相信Gulp会更胜一筹(请看后面的”Why Gulp?”部分),同时我汇总了一个使用Javascript编写的构建工具清单,可供大家参考。
Gulp是一个可以在GitHub上找到的开源项目。
Gulp优势:
Gulp
相比于 Grunt
有很多优点,比较直观的:就是学习曲线比较平滑。比Grunt速度更快、配置更少。
1. 新建gulpfile.js
2. 安装插件到package.json生成依赖
熟悉一下Gulp:
gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数

// 导入工具包('node_modules'里对应模块)
var gulp = require('gulp'), // 本地安装gulp所用到的地方
less = require('gulp-less'); // 定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
// 该任务针对的文件
gulp.src('src/less/index.less')
.pipe(less()) // 该任务调用的模块
.pipe(gulp.dest('src/css')); // 将会在src/css下生成index.css
}); // 定义默认任务
gulp.task('default', ['testLess']);


gulp+Babel 搭建ES6环境
gulpfile.js文件写入:
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
babel = require('gulp-babel'); /* 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+Babel 搭建ES6环境的更多相关文章
- ES6 初体验 —— gulp+Babel 搭建ES6环境
ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...
- 基于Gulp + Browserify构建es6环境下的自动化前端项目
随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...
- babel与ES6环境的搭建
我们知道浏览器环境下直接运行ES6是存在一些兼容性问题的.那么把ES6变成ES5不就行了吗? 那如何将ES6转换成ES5呢?我们来搭建它的转换环境吧~ 第一步:初始化项目,建立写注意事项的README ...
- 让浏览器兼容ES6语法(gulp+babel)
使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...
- es6开发环境搭建,babel 将es6转化成es5
工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...
- ES6环境搭建及react-router学习
一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...
- 搭建ES6运行环境
当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内, ...
- Gulp实例(包括环境搭建的自动检测)
# Gulp实例(包括环境搭建的自动检测) Gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面我将完成如下的功能点并且附上源码: CSS文件打包 less文件打包 s ...
- React+Webpack+ES6环境搭建(自定义框架)
引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...
随机推荐
- wpf 旋转效果
<Grid> <Grid.Triggers> <EventTrigger RoutedEvent="Page.Loaded"> <Begi ...
- [转]Excel 取汉字拼音首位
转自:http://jingyan.baidu.com/article/63acb44adca44461fcc17e85.html 转自:http://jingyan.baidu.com/articl ...
- POJ3694 Network
题目大意:已知连通图G有N个点m条无向边,有Q次操作,每次操作为增加一条边,问每次操作后图上有几个桥. 如果添加一条边进行Tarjin搜索一次时间复杂度为m*m*q很大,会超时.真的超时,我试过.看了 ...
- jquery实现标签上移、下移、置顶
eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...
- 【java】:通用接口
电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1 用例 ps:商品ID这么获取:http://item.jd ...
- Oracle中的带参数的视图--我们致力于打造人力资源软件
创建包和包体 create or replace package pkg_pv is procedure set_pv(pv varchar2); function get_pv return var ...
- select练习1
1. 查询Student表中的所有记录的Sname.Ssex和Class列. select t.sname ,t.ssex , t.sclass from student t 2. 查询教师所有的单位 ...
- APNS推送通知消息负载内容和本地格式字符串
来源:http://hi.baidu.com/tangly888/blog/item/62948520121870559358074f.html 翻译苹果文档 地址: 翻译:tangly http: ...
- 斯坦福第十八课:应用实例:图片文字识别(Application Example: Photo OCR)
18.1 问题描述和流程图 18.2 滑动窗口 18.3 获取大量数据和人工数据 18.4 上限分析:哪部分管道的接下去做 18.1 问题描述和流程图
- 完全背包问题:湫湫系列故事――减肥记I(HDU 4508)
湫湫系列故事――减肥记I HDU 4508 一道裸的完全背包 #include<iostream> #include<algorithm> #include<stdio ...