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的文件,其中可以指定多个参数,常用的有

  1. {
  2. "presets": ["es2015","react"],
    "plugins": "transform-runtime"
  3. }

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:

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

所以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. 详解c++指针的指针和指针的引用(转)

    http://www.cnblogs.com/li-peng/p/4116349.html

  2. linux svn 用户配置

    1:创建存放仓库的目录 mkdir -p /home/svn/ 2:创建svn仓库 svnadmin create /home/svn/evansource 3:配置仓库(一共三个文件夹auzhz.p ...

  3. 单片机中用c编程时头文件reg51.h及reg52.h解析

    单片机中用c编程时头文件reg51.h及reg52.h解析 我们在用c语言编程是往往第一行就是reg51.h或者其他的自定义头文件,我们怎么样来理解呢? 1)“文件包含”处理. 程序的第一行是一个“文 ...

  4. Win7下安装Centos7

    win7下安装Centos同一块硬盘时:win启动项没有,使用pe进行修复,之后用easybcd进行centos启动项修复,grub2,自动搜索两块硬盘时:不要动启动项,bios选启动的硬盘即可 li ...

  5. springmvc 用拦截器+token防止重复提交

    一,原理: 1,在进入到提交页面时,使用拦截器拦截在进入此方法前,生成一个token,放到session中, @RequestMapping(value = "/{id}/details&q ...

  6. 2016-12-14:通过static关键字,使用类成员函数作为回调函数

    #include <iostream> using namespace std; class Callee { public: void PrintInfo(int i) { cout & ...

  7. 类的高级:访问修饰符、封装、静态类成员static、内部类;

    访问修饰符: 公开访问(public):对所有子类,非子类访问: 受保护的(protected):只有同包子类.非子类.不同包子类可访问,不同包非子类不可访问: 私有的(private):只有本类可访 ...

  8. js 中文乱码解决方法

     bookManageAdd: function () {         top.MainFrameJS.confirm = true;         var action = getQueryS ...

  9. Mac与Phy组成原理的简单分析

    1. general 下图是网口结构简图.网口由CPU.MAC和PHY三部分组成.DMA控制器通常属于CPU的一部分,用虚线放在这里是为了表示DMA控制器可能会参与到网口数据传输中. 对于上述的三部分 ...

  10. for 小曦

    安装GO 当前版本1.6.2 http://blog.163.com/hehaifeng1984@126/blog/static/690011362013101044011568/ 教程 https: ...