当然，gulp不仅仅能转换Sass，这里会提到如下转换:
- jsx转换成常规的JavaScript（说到jsx，玩过react的同学应该是知道的）
- es6转换为es5
- 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文件，效果如下：
大功告成~~