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

接下来在项目根目录下来新建出我们的主角——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.   
  7. gulp.task("default",function () {  
  8.     return gulp.src('./src/jsxAndEs6.js') //要转换的文件  
  9.         .pipe(react())  //转换jsx代码  
  10.         .pipe(babel({  
  11.             presets:['babel-preset-es2015']    //插件数组  
  12.         }))  //es6转es5  
  13.         .pipe(gulp.dest('./dest'));//转换后的文件输出到这里  
  14. })  

  注意:这里引入库的时候,并没有引入我们用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.   
  4. body {  
  5.   font-family: $fontStack;  
  6.   color: $primaryColor;  
  7. }  


接下来回到我们的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.   
  7. gulp.task('less',function () {  
  8.     return gulp.src('./src/Less_style.less')  
  9.         .pipe(less())  
  10.         .pipe(gulp.dest('./dest'));  
  11. });  
  12. gulp.task('sass',function () {  
  13.     return gulp.src('./src/Sass_style.scss')  
  14.         .pipe(sass())  
  15.         .pipe(gulp.dest('./dest'))  
  16. })  
  17. gulp.task("default",['less','sass'],function () {  
  18.     return gulp.src('./src/jsxAndEs6.js') //要转换的文件  
  19.         .pipe(react())  //转换jsx代码  
  20.         .pipe(babel({  
  21.             presets:['babel-preset-es2015']    //插件数组  
  22.         }))  //es6转es5  
  23.         .pipe(gulp.dest('./dest'));//转换后的文件输出到这里  
  24. });  

 

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

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

 

大功告成~~


posted on 2016-12-16 14:30  Yuuya丶Rin  阅读(972)  评论(0编辑  收藏  举报

导航