gulp入坑系列(4)——gulp的代码转换

终于进入正题了，当初也是为了将Sass和SCSS代码转换成CSS才从Sass的学习路径忽然跳到了gulp的大坑里╮(￣▽￣")╭

当然，gulp不仅仅能转换Sass，这里会提到如下转换:

1. jsx转换成常规的JavaScript（说到jsx，玩过react的同学应该是知道的）
2. es6转换为es5
3. Less,Sass转换为CSS

首先，新建一个文件夹，然后继续和之前的方法一样，在文件夹里npm init , npm install --save-dev gulp

安装好了gulp之后，我们还需要安装几个用来代码转换的插件，对应关系如下:

jsx代码转换  npm install gulp-reactes6代码转换 

 npm install gulp-babel , npm install babel-preset-es2015   

   (其实es6也叫es2015)

less代码转换npm install gulp-lesssass代码转换  npm install gulp-sass

tips：如果npm装的很慢或者卡进度了，可以换用cnpm.

首先是jsx和es6的转换：

好的，准备工作结束，我们先来建一个src目录，在目录下新建一个js文件，写入一些jsx和es6的代码:

'use strict';const react = require('react');class MYTEST extends react.Component{    constructor(props){        //noinspection JSAnnotator        super(props);    }    render(){        return (            <div>gulp react ,jsx to js and es6 to es5.</div>        )    }}

接下来在项目根目录下来新建出我们的主角——gulpfile.js，写入代码如下：

var gulp = require('gulp');var react = require('gulp-react');var babel = require('gulp-babel');var less = require('gulp-less');var sass = require('gulp-sass');gulp.task("default",function () {    return gulp.src('./src/jsxAndEs6.js') //要转换的文件        .pipe(react())  //转换jsx代码        .pipe(babel({            presets:['babel-preset-es2015']    //插件数组        }))  //es6转es5        .pipe(gulp.dest('./dest'));//转换后的文件输出到这里})

  注意：这里引入库的时候，并没有引入我们用npm安装的babel-preset-es2015,因为他是作为babel进行转换时的一个插件参数存在的，直接在babel中调用即可

接下来运行gulp指令，会发现目录的dest目录下，多了一个我们转换后的js文件，打开转换后的代码，惨不忍睹啊：

到这里呢，jsx和es6的转换就搞定了。

接下来是Less和Sass:

首先在src目录下新建一个less文件，代码如下：

@color:#aaa;.container{  color:@color;}

再新建一个sass文件，代码如下：

$fontStack:    Helvetica, sans-serif;$primaryColor: #333;body {  font-family: $fontStack;  color: $primaryColor;}

接下来回到我们的gulpfile.js，添加转换sass和less的task：

var gulp = require('gulp');var react = require('gulp-react');var babel = require('gulp-babel');var less = require('gulp-less');var sass = require('gulp-sass');gulp.task('less',function () {    return gulp.src('./src/Less_style.less')        .pipe(less())        .pipe(gulp.dest('./dest'));});gulp.task('sass',function () {    return gulp.src('./src/Sass_style.scss')        .pipe(sass())        .pipe(gulp.dest('./dest'))})gulp.task("default",['less','sass'],function () {    return gulp.src('./src/jsxAndEs6.js') //要转换的文件        .pipe(react())  //转换jsx代码        .pipe(babel({            presets:['babel-preset-es2015']    //插件数组        }))  //es6转es5        .pipe(gulp.dest('./dest'));//转换后的文件输出到这里});

注意，写了新的task之后，一定要引入到default中哦，不然不会执行的。

接下来在命令行执行gulp指令，会发现dest文件夹下多出了编译后的css文件，效果如下：

大功告成~~