Gulp pitfall series (4) -- code conversion of gulp, gulp

Gulp pitfall series (4) -- code conversion of gulp, gulp
Finally, I entered the topic. It was just to convert Sass and SCSS code into CSS that I suddenly jumped from the learning path of Sass to the big pitfall of gulp.

Of course, gulp can not only convert Sass, but here we will mention the following conversion:

First, create a new folder, and then proceed with the same method as before, in the folder Npm init, Npm install -- save-dev gulpAfter installing gulp, we also need to install several plug-ins for code conversion. The relationship is as follows:

Jsx Code Conversion	Npm install gulp-react
Es6 Code Conversion	Npm install gulp-babel, npm install babel-preset-es2015 (es6 is also called es2015)
Less Code Conversion	Npm install gulp-less
Sass Code Conversion	Npm install gulp-sass

  Tips: If the npm installation is slow or the card is in progress, you can switch to cnpm.     First, the conversion between jsx and es6:Okay. After the preparation is complete, we will first create a src directory, create a js file under the directory, and write some jsx and es6 code:

1. 'Use strict ';
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. }

Next, create the main character in the project root directory --Gulpfile. jsWrite the following code:

 

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 ');
7. Gulp. task ("default", function (){
8. Return gulp. src ('./src/jsxAndEs6.js') // file to be converted
9. . Pipe (react () // convert jsx code
10. . Pipe (babel ({
11. Presets: ['babel-preset-es2015 '] // plug-in array
12. }) // Es6 to es5
13. . Pipe (gulp. dest ('./dest'); // output the converted file here
14. })

Note: When importing data to the database here, we didn't introduce the babel-preset-es2015 we installed with npm, because it exists as a plug-in parameter for babel conversion, which can be called directly in babel.

 

Next, run the gulp command and you will find that there is an additional js file under the dest directory of the directory, and the converted code is opened, which is terrible:

Here, the conversion between jsx and es6 is done.

Next are Less and Sass:

First, create a less file in the src directory. The Code is as follows:

 

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

Create an sass file again. The Code is as follows:

1. $ FontStack: Helvetica, sans-serif;
2. $ PrimaryColor: #333;
4. Body {
5. Font-family: $ fontStack;
6. Color: $ primaryColor;
7. }

Next, return to our gulpfile. js and add the tasks that convert sass and less:

 

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 ');
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') // file to be converted
19. . Pipe (react () // convert jsx code
20. . Pipe (babel ({
21. Presets: ['babel-preset-es2015 '] // plug-in array
22. }) // Es6 to es5
23. . Pipe (gulp. dest ('./dest'); // output the converted file here
24. });

 

Note: after a new task is written, it must be introduced to default. Otherwise, it will not be executed.

Next, execute the gulp command on the command line and you will find that there are more compiled css files in the dest folder. The effect is as follows:

 

Success ~~