何为babel / gulp
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的更多相关文章
- ES6项目构建(babel+gulp+webpack)
(一)基础架构 (二)任务自动化(gulp) (三)编译工具(babel,webpack) (四)代码实现 一.基础构架 1.app : 放置前端代码 css : css文件 js : js文件 cl ...
- browserify babel gulp 没有编译import的文件
1.遇到坑的gulp配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel ...
- ES6转换器之Babel
ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...
- 使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...
- gulp + gulp-better-rollup + rollup 构建 ES6 开发环境
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境 关于 Gulp 就不过多啰嗦了.常用的 js 模块打包工具主要有 webpack.rollup 和 bro ...
- 使用gulp+bebal实现前端自动化es6转es5的构建
说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码.本文介绍的就是如何手动和自动的把es6转成e ...
- gulp#4.0
gitbook教程: https://dragon8github.gitbooks.io/gulp-webpack/content/an-zhuang-gulp-4-0.html gulpfile.j ...
- babel初学教程
babel安装 安装前你需要安装node.js和npm以及gulp三个包. 然后执行以下命令 $ npm init 然后在安装 babel和babel-core两个包 $ npm install -- ...
- 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...
随机推荐
- 如何用 JIRA REST API 创建 Issue
简介 最近需要把一个Excel里的issues list全部到JIRA上create 一遍, 总不能手动创建百十来个issues吧, 本文讲述一下如果调用JIRA提供的Rest API 来自动创建is ...
- 转WCF Proxy Authentication Required
WCF Proxy Authentication Required The Problem When I’m in the office, I have to use an authenticated ...
- 学习游戏渲染(Shader)的用处
本文在讨论的主题并不限于具体引擎或具体语言,为了说明方便可能会提到Unity的一些内容. 最近渐渐发现很多从事游戏开发的新人,对于学会写Shader似乎总是有几分神往,但一般入了门或者学了一段时间后 ...
- xcode 插件地址
http://finalshares.com/read-1104 curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/de ...
- system verilog的一些总结(从其他博客复制来的)
转载自 http://blog.sina.com.cn/s/blog_e7fec2630101f5t9.html SystemVerilog是一种硬件描述和验证语言(HDVL),它基于IEEE 136 ...
- 交换机做Channel-Group
core1#conf tEnter configuration commands, one per line. End with CNTL/Z.core1(config)#inter range g ...
- 百度地图api根据地图缩放等级显示不同的marker点,功能二
功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...
- js实现表单验证 常用JS表单验证
CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...
- WEBPACK简介
Webpack 是一个强力的模块打包器. 所谓 包 (bundle) 就是一个 JavaScript 文件,它把一堆 资源 (assets) 合并在一起,以便它们可以在同一个文件请求中发回给客户端. ...
- 基于Python的函数回归算法验证
看机器学习看到了回归函数,看了一半看不下去了,看到能用方差进行函数回归,又手痒痒了,自己推公式写代码验证: 常见的最小二乘法是一阶函数回归回归方法就是寻找方差的最小值y = kx + bxi, yiy ...