js笔记四:node 6.9.x for gulp完整配置过程

node 6.9.x已经支持99%的ES2015的特性,但是ES2017中的async和await,import是不支持,但是要想使用,则需要将ES2017的代码,降级.

网上很多例子,都是把代码降级到ES5,结果,就很难读了.其实只要降级到node 6.9.x支持的部分就可以了.像class,=>等就可以直接有了,这样降级后的代码,可读性依然非常好
下面配置如下:
第一步:安装全局库
npm install babel gulp -g
第二步:安装本地依赖库

npm install babel babel-core babel-runtime gulp-babel gulp gulp-plumber --save-dev

npm install --save-dev babel-preset-eslatest-node6 babel-plugin-transform-es2015-destructuring  babel-plugin-transform-es2015-parameters  babel-plugin-transform-object-rest-spread

npm install gulp-file-sync gulp-sourcemaps --save-dev
第三步:编写.babelrc

//----------------------------------------------------------

{

  "presets": ["eslatest-node6"],

  "plugins": [

  ]

}

---------------------------------------------------------------
第四步:gulpfile.babel.js

---------------------------------------------------------------

'use strict';

 

import gulp from 'gulp';

import babel from 'gulp-babel';

import sourcemaps from 'gulp-sourcemaps';

import fileSync from 'gulp-file-sync';

import plumber from 'gulp-plumber';

 

gulp.task('default', () => {

  gulp.src('lib/**/*.js')

     .pipe(plumber())

    .pipe(sourcemaps.init())

    .pipe(babel())

    .pipe(sourcemaps.write())

    .pipe(gulp.dest('build/lib'));

});

 

gulp.task('static', () => {

fileSync('static','build/lib/static', {recursive: true});

});

 

gulp.task('watch', ['default'], ()=>{

gulp.watch(['lib/**/*.js'], ['default']);

 

gulp.watch(['static/*.*'], ()=> {

fileSync('static','build/lib/static', {recursive: true});

});

});

 

---------------------------------------------------------------

最后 这里定义的代码,都是放到lib目录下面,而降级后的代码,则放到build/lib目录下的.build/lib是由gulp自动生成的

笔记列表：

js笔记一:js中forEach，for in，for of循环的用法

js笔记二:node.js的npm使用理解

js笔记三:Set

js笔记四:node 6.9.x for gulp完整配置过程

js笔记五:数组基础篇

js笔记六:数组功能篇

js笔记七:数组的解构与变参

js笔记八:class

js笔记九:当运行脚本

js笔记十:vscode代码提示