gulp入坑系列(4)——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的代码:

 

1. 'use strict';
2. const react = require('react');
3. class MYTEST extends react.Component{
4. constructor(props){
5. //noinspection JSAnnotator
6. super(props);
7. }
8. render(){
9. return (
10. <div>gulp react ,jsx to js and es6 to es5.</div>
11. )
12. }
13. }

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

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

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

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

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

接下来是Less和Sass:

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

1. @color:#aaa;
2. .container{
3. color:@color;
4. }

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

1. $fontStack:    Helvetica, sans-serif;
2. $primaryColor: #333;
3. body {
4. font-family: $fontStack;
5. color: $primaryColor;
6. }

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

1. var gulp = require('gulp');
2. var react = require('gulp-react');
3. var babel = require('gulp-babel');
4. var less = require('gulp-less');
5. var sass = require('gulp-sass');
6. gulp.task('less',function () {
7. return gulp.src('./src/Less_style.less')
8. .pipe(less())
9. .pipe(gulp.dest('./dest'));
10. });
11. gulp.task('sass',function () {
12. return gulp.src('./src/Sass_style.scss')
13. .pipe(sass())
14. .pipe(gulp.dest('./dest'))
15. })
16. gulp.task("default",['less','sass'],function () {
17. return gulp.src('./src/jsxAndEs6.js') //要转换的文件
18. .pipe(react())  //转换jsx代码
19. .pipe(babel({
20. presets:['babel-preset-es2015']    //插件数组
21. }))  //es6转es5
22. .pipe(gulp.dest('./dest'));//转换后的文件输出到这里
23. });

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

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

大功告成~~