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-react
es6代码转换	npm install gulp-babel , npm install babel-preset-es2015       (其实es6也叫es2015)
less代码转换	npm install gulp-less
sass代码转换	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文件，效果如下：

 

大功告成~~