Babel主要用来将新版本的javascript(ES6,ES7)编译为ES5,目前它对于新标准的支持程度甚至高于Chrome浏览器。通过引入预设babel-preset-react,babel还能解析jsx语法结构。

其实,原本的babel什么都不会做,babel index.js只是将index.js里的内容输出到控制台。而babel index.js --out-file output.js 则产生一个新文件(如果没有提前创建的话),并把index.js的内容拷贝到output.js中;babel src --out-file dest,则是将src文件夹里的所有文件拷贝到dest下。

为了让babel具备解析功能,需要在工程文件下创建一个名为.babelrc的文件,其中可以指定多个参数,常用的有

{
"presets": ["es2015","react"],
"plugins": "transform-runtime"
}

presets是一组相关的plugins的集合,例如es2015就包含了es2015-arrow-functions/es2015-for-of等插件。

gulp是一个基于nodejs流的自动化构建工具,其API有:gulp.src(),返回所指文件的可读流,并且可以用pipe方法输入到插件进行处理;gulp.dest()返回一个可写流,将上一步的流写入指定文件;gulp.watch(glob,[tasks]),监视glob的内容,当发生变化时,执行[tasks]里的任务;gulp.task("taskname",fn),定义taskname任务,fn为相应的函数。Gulp的任务要放到gulpfile.js里。

gulp和babel一样的是,它本身不会完成什么复杂的事情,其主要功能依靠插件完成。gulp-less可以将less编译为css, gulp-minify-css可以把css压缩,gulp-minify-html压缩html,gulp-babel则可以将ES6的代码编译为ES5。以下是一个简单的将index.js编译为ES5的gulpfile.js:

var gulp = require("gulp")
var babel = require("gulp-babel")
gulp.task("default",function(){
gulp.src("./index.js").pipe(babel({presets:"es2015"})).pipe(gulp.dest("./output.js"))
})

所以babel和gulp的侧重点不同,babel着重于编译,在babel的环境下可以尝试新标准定义的语法;gulp是用来构建项目结构的,使用它的插件,能实现压缩、合并、热更新等。

何为babel / gulp的更多相关文章

  1. ES6项目构建(babel+gulp+webpack)

    (一)基础架构 (二)任务自动化(gulp) (三)编译工具(babel,webpack) (四)代码实现 一.基础构架 1.app : 放置前端代码 css : css文件 js : js文件 cl ...

  2. browserify babel gulp 没有编译import的文件

    1.遇到坑的gulp配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel ...

  3. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  4. 使用babel编译es6

    起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...

  5. gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

    gulp + gulp-better-rollup + rollup 构建 ES6 开发环境 关于 Gulp 就不过多啰嗦了.常用的 js 模块打包工具主要有 webpack.rollup 和 bro ...

  6. 使用gulp+bebal实现前端自动化es6转es5的构建

    说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码.本文介绍的就是如何手动和自动的把es6转成e ...

  7. gulp#4.0

    gitbook教程: https://dragon8github.gitbooks.io/gulp-webpack/content/an-zhuang-gulp-4-0.html gulpfile.j ...

  8. babel初学教程

    babel安装 安装前你需要安装node.js和npm以及gulp三个包. 然后执行以下命令 $ npm init 然后在安装 babel和babel-core两个包 $ npm install -- ...

  9. 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

    8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...

随机推荐

  1. 如何用 JIRA REST API 创建 Issue

    简介 最近需要把一个Excel里的issues list全部到JIRA上create 一遍, 总不能手动创建百十来个issues吧, 本文讲述一下如果调用JIRA提供的Rest API 来自动创建is ...

  2. 转WCF Proxy Authentication Required

    WCF Proxy Authentication Required The Problem When I’m in the office, I have to use an authenticated ...

  3. 学习游戏渲染(Shader)的用处

     本文在讨论的主题并不限于具体引擎或具体语言,为了说明方便可能会提到Unity的一些内容. 最近渐渐发现很多从事游戏开发的新人,对于学会写Shader似乎总是有几分神往,但一般入了门或者学了一段时间后 ...

  4. xcode 插件地址

    http://finalshares.com/read-1104 curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/de ...

  5. system verilog的一些总结(从其他博客复制来的)

    转载自 http://blog.sina.com.cn/s/blog_e7fec2630101f5t9.html SystemVerilog是一种硬件描述和验证语言(HDVL),它基于IEEE 136 ...

  6. 交换机做Channel-Group

    core1#conf tEnter configuration commands, one per line.  End with CNTL/Z.core1(config)#inter range g ...

  7. 百度地图api根据地图缩放等级显示不同的marker点,功能二

    功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...

  8. js实现表单验证 常用JS表单验证

    CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...

  9. WEBPACK简介

    Webpack 是一个强力的模块打包器. 所谓 包 (bundle) 就是一个 JavaScript 文件,它把一堆 资源 (assets) 合并在一起,以便它们可以在同一个文件请求中发回给客户端. ...

  10. 基于Python的函数回归算法验证

    看机器学习看到了回归函数,看了一半看不下去了,看到能用方差进行函数回归,又手痒痒了,自己推公式写代码验证: 常见的最小二乘法是一阶函数回归回归方法就是寻找方差的最小值y = kx + bxi, yiy ...