Node-Babel-Gulp 随笔
一. Node（npm） 安装
Node 下载地址： 官网http://www.nodejs.org/download/、 （选择对应的系统版本）下载完成后，直接点击安装。
安装完成后，npm包管理工具已随同Node一起安装。
打开命令控制台 (运行-> cmd)， 输入node -v 查看安装的Node版本，输入npm -v 查看安装的npm版本。
二. babel 之ES6编译模块babel安装
1. 创建项目文件
如下项目结构图（打勾文件为自定义文件夹）：
ES6_src : 为ES6源码文件夹
ES5_lib: ES6转码后输出的对应ES5文件夹
2. 通过npm包管理工具安装插件babel-*
（1）将当前路径定位到cd D:\ES6TOES5
（2）通过命令行安装插件
安装插件依次为：
npm install babel-cli -g 全局安装：命令行转码工具
npm install --save-dev babel-core 如果某些代码需要调用Babel 的API进行转码，需要使用该模块
npm install --save-dev babel-preset-es2015 ES2015转码规则
(3). 通过 babel --help 查看是否安装成功
(4). 在项目目录根目录下创建配置文件 ' .babelrc ’
注：改配置文件可可指定需要使用的插件
如：{“presets”: ["es2015"]}
(5)创建ES6.js 并通过命令编译生成ES5文件
es6.js ： let es6var = [1,2,3]
命令行中输入如下命令：
ES6_src -d ES5_lib 或者 ES6_src --out-dir ES5_lib
回车后将在ES5_lib 中看到对应的es6.js 编译后端es5语法文件
（6）实时监控ES6_src 中的es6.js (修改，创建，删除)变化，并实时编译输出到ES5_lib中
在命令行中输入如下命令：
babel ES6_src --watch -d ES5_lib 或者 babel ES6_src -w -d ES5_lib
三. Gulp 任务自动管理工具
Gulp：基于管道（pipe）思想，通过Gulp 允许用户创建任务，定制任务，监视文件及任务并输出相应操作。Gulp工具非常强大，
可以通过gulp安装需要的插件（如：js/css 文件合并，压缩，编译等等）
1. 安装 Gulp
Gulp 需要全局安装，然后再在项目开发目录中安装为本地模块。在项目目录中运行如下命令：
npm install -g gulp
npm install --save-dev gulp (--save-dev: 用来更新package.json, 更新devDependencise 值，以表明项目需要依赖gulp)
推荐安装的插件模块：
1）gulp-babel ES6编译->ES5使用
2）gulp-plumber 任务出错中断，修复后自动重传插件
3）gulp-replace 文件内字符串替换插件
4）gulp-uglify Js文件压缩插件
5）gulp-concat Js文件合并插件
6）gulp-load-plugins 通过项目目录下的自定义package.json配置文件，一次读取需要加载的如上模块。
这里附上我的测试package.json配置文件（网上可以找到标准的配置）：
{
"devDependencies": {
"babel-preset-es2015": "^6.13.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-replace": "^0.5.4"
}
}
2. gulpfile.js 创建与配置
gulpfile.js 为 gulp 的配置文件。该文件可配置在项目根目录下。该配置文件可通过js语法编写任务及监视等自动管理服务
这里给出一份我的测试文件：
3. gulp 模块的主要方法简介
（1） src()
gulp 模块的src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。
参数形式：
1）js/app.js 指定确切的文件名
2）js/*.js 某个目录所有后缀名为js的文件
3）js/**/*.js 某个目录及其所有子目录中的所有后缀为js的文件
4）!js/app.js 除了 js/app.js以外的所有文件
5）*.+(js css) 匹配项目根目录下，偶有后缀名为js或css的文件
6) src 方法参数可以是一个数组
（2）dest()
dest方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法。将输出写入多个目录。如果有目录不存在，将会被新建。
1）dest方法还可以接受第二个参数，表示配置对象
（3）task()
task 方法用于定义具体的任务。他的第一个参数时任务名，第二个参数时任务函数。
1) task 方法还可以指定按顺序运行的一组任务；
2）如果希望各个任务严格按次序运行，可以把前一个任务携程后一个任务的依赖模块；
3）如果一个任务的名字为default, 就标明它是“默认任务”，在命令行直接输入gulp命令，就会运行改任务。
（4）watch()
watch 方法用于指定需要监视的文件。一旦文件发生变动，就运行指定任务。
1） watch方法回调函数事件属性：event.type, event.path;
2) watch方法监控文件的变化(修改，增加，删除文件)，会触发cahnge事件；
如：gulp.watch(' ', ['build']).on('change', function(event){console.log(event.type)})
3) watch 其它可触发事件：
end: 回调函数运行完毕时触发
error: 发生错误是触发
ready: 当开始监听时触发
nomatch: 没有匹配到监听文件是触发；
4) watcher = gulp.watch('',[' ']);
watcher对象包含的以一些其它方法：
watcher.end(): 停止watcher对象。不会再调用任务或者回调函数；
watcher.files(): 返回watcher对象监视的文件；
watcher.add(glob): 增加所需监视的文件，他可附件第二个参数，表示回调函数；
watcher.remove(filepath): 从watcher对象中移走一个监视的文件；
最后这里附上测试项目目录图：
开启命令监视目录并修改监视文件命令：
推荐文章：
扫一扫
3257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
