Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里.前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS.解析模板以及在文件变动时编译LESS文件(当然这些只是一小部分例子). Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜…

ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用ES6,一方面积累一些经验为大型项目做准备.另一方面小型的活动专题不涉及后期维护,从成本上我并没有冒太大的风险.下面我简单介绍一下我搭建的ES6 环境. 虽然移动平台是webkit大行其道,并且webkit对ES6支持的还不错,但是我并不打算webkit内核裸跑ES6.我选择了预编译的方案——babe…

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的…

我们知道浏览器环境下直接运行ES6是存在一些兼容性问题的.那么把ES6变成ES5不就行了吗? 那如何将ES6转换成ES5呢?我们来搭建它的转换环境吧~ 第一步:初始化项目,建立写注意事项的README.md文件,初始化package.json文件. 第二步:创建index.html文件,创建src文件夹放js文件,dist文件夹放编译之后的js文件(这个也是html文件要引入的js文件). 记得要修改package.json文件. 第三步:安装es2015preset,创建.babelrc文件,…

使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器又没有同步更新版本,或者是新版本的浏览器没有对ES6的特性进行兼容,那浏览器肯定是无法识别我们所写的ES6代码,所以假如想直接编写ES6代码在浏览器执行,结果由于兼容性问题只能是报错.那么浏览器不支持,而我们又想用ES6语法编写JS代码怎么办,针对这个问…

工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法.如果你听过我Vue课程的话,应该知道Webpack是有自动编译转换能力的,除了Webpack自动编译,我们还可以用Babel来完成.这节课我们就使用Babel把ES6编译成ES5. ** 建立工程目录: ** 先建立一个项目的工程目录,并在目录下边建立两个文件夹:src和dist src…

一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES7的代码转为ES5的代码.今天,就配置了一下环境,写了一个react-router,主要是练习自己的编程能力,哈哈...在此分享一下! 二.ES6环境搭建 搭建环境的工具有很多种,jspm,webpack,gulp等等...我主要是采用gulp+babel+browserify来搭建的.具体步骤如下…

当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内,很多小伙伴都踊跃的学习这门新的语言,之所以说是一门新的语言,是因为跟ES5相比,语法方面变化确实有点大,可以说新的JavaScript语法看上去有种脱胎换骨的感觉.博主也曾跃跃欲试,看了很多语法方面的教程,可是无奈浏览器还未完全支持ES6的规范,只看不练,有种眼高手低的感觉,相信朋友们也会有同样的心…

# Gulp实例(包括环境搭建的自动检测) Gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面我将完成如下的功能点并且附上源码: CSS文件打包 less文件打包 sass文件打包 JavaScript文件打包 图片文件打包 具体的实例请点击一下链接前往 github 进行下载: Gulp GitHub demo实例下载 1. 创建 package.json 文件(使用 cnpm init 命令行) 生成的package.json代码如下所示: 注意:我将ent…

引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Native更是扩大了前端的边界. 说道React,那就不得不说一下Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,更是支持模块化处理. 下面我就分享一下关于Webpack+React+ES6的环境搭建(通用)[附加发布版] 准备工作 首先需要准…