何为babel / gulp

Posted 2020-08-22 鹦哥

           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是用来构建项目结构的，使用它的插件，能实现压缩、合并、热更新等。