preface

Hey, are you still writing CSS code? Struggling with some compatibility with javascript statements? Want to speed up development? Let’s bask in the sun of knowledge and code happily. Okay, I’m ready to talk, so follow me into the world of Stylus, Babel, lgulp.

A, stylus

Stylus is a CSS preprocessing framework that comes from the Node.js community in 2010 to support CSS preprocessing for Node projects, so Stylus is a new language for creating robust, dynamic, and expressive CSS. Relatively young, its essence to do things similar to SASS/LESS, should be a lot of reference, so approximate scripting way to write CSS code.

Stylus uses.styl as a file extension by default and supports a variety of CSS syntax. Stylus is stronger in function and has a stronger js connection.

Stylus installation
$ yarn global add stylus  
Copy the code
Stylus application

stylus

body,html
    margin:0
    padding:0
Copy the code

Compiled into

body,
html {
  margin: 0;
  padding: 0;
}
Copy the code

Nesting Stylus

header
    #logo
        border:1px solid red
    ul
    li a
        display: block
        color: blue
        padding: 5px
        html.ie &
            padding: 6px
        &:hover
            color: red
Copy the code

Compiled into

header #logo {
  border: 1px solid #f00;
}
ul li a {
  display: block;
  color: #00f;
  padding: 5px;
}
html.ie ul li a {
  padding: 6px;
}
ul li a:hover {
  color: #f00;
}
Copy the code

Functions method returns a value

stylus

/* With parameters */ border-radius(val) -webkit-border-radius: val-moz-border-radius: val border-radius: val button border-radius(5px); /* No arguments */ border-radius() -webkit-border-radius: arguments-moz-border-radius: arguments border-radius: arguments button border-radius: 5px 10px;Copy the code

Compiled into

button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* No arguments */ button {-webkit-border-radius: 5px 10px; -moz-border-radius: 5px 10px; border-radius: 5px 10px; }Copy the code

Variables stylus

font-size = 14px
body
    font font-size Arial, sans-seri
Copy the code

Compiled into

body {
  font: 14px Arial, sans-seri;
}
Copy the code

Variables are placed in the properties stylus

#prompt
    position: absolute
    top: 150px
    left: 50%
    width: w = 200px
    margin-left: -(w / 2)
Copy the code

Compiled into

#prompt {
  position: absolute;
  top: 150px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}
Copy the code

Block attribute access references stylus

#prompt
    position: absolute
    width: 200px
    margin-left: -(@width / 2)
Copy the code

Compiled into

#prompt {
  position: absolute;
  width: 200px;
  margin-left: -100px;
}
Copy the code

Styl -o common. CSS stylus -w common.styl -o common. CSS command line (Go to the specified folder to create common. CSS according to the created common.styl file. (add -w to always listen. Styl style change, automatically compiled into CSS file.

Second, the Babel

Babel is a widely used transcoder that converts ES6 code into ES5 code for execution in existing environments.








Configure the Babel

The command

        $ yarn add babel-cli
        $ yarn add babel-plugin-transform-object-assign
        $ yarn add babel-preset-es2015
Copy the code

Configuration file. Babelrc

The configuration file for Babel is.babelrc, which is stored in the root directory of the project. The first step to using Babel is to configure this file. This file is used to set transcoding rules and plug-ins. The basic format is as follows.

{
    "presets": ["es2015"],
    "plugins": ["transform-object-assign"]
}
Copy the code

The generated package. Json

{"babel-cli": "^6.24.1", "babel-plugin-transform-object-assign": "^6.22.0", "babel-preset- ES2015 ": "^ 6.24.1}}"Copy the code

Chestnut (index. Js)

var obj = { a: 1 };
let objA = { b: 2 };
var obj1 = Object.assign({}, obj, objA);
console.log(obj1);
Copy the code

Babel transformed code (babel.js)

$ index.js -o babel.js
```js
"use strict";

var _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var obj = { a: 1 };
var objA = { b: 2 };
var obj1 = _extends({}, obj, objA);
console.log(obj1);
Copy the code

Third, gulp

Gulp is a tool to build code in the process of front-end development, and it is a powerful tool to build automation projects. She can not only optimize the resources of the site, but also automate many repetitive tasks in the development process with the right tools; Using her, we can not only have fun writing code, but also greatly improve our work efficiency. The installation

To initialize node, run the following command: $NPM init -y Local installation glup: $YARN add gulp Local installation browser-sync: $YARN add browser-sync Local installation gulp-stylus: Gulp-minify - CSS: $yarn add gulp-minify- CSS: gulp-uglify: $yarn add gulp-uglifyCopy the code

Configure browser-sync for gulp tasks

Var gulp = require('gulp'); Var browserSync = require('browser-sync').create(); var reload = browserSync.reload; Gulp.task ('watch', function() {// start browser-sync browsersync.init ({server: './'}); var temlateFiles = [ '*.html' ]; gulp.watch(temlateFiles).on('change', reload); });Copy the code

The gulp task configures the stylus

var stylusPath = './src/stylus/*.styl';
var stylus = require('gulp-stylus');
var minifyCss = require('gulp-minify-css');

gulp.task('stylus', function() {
    return      
gulp.src(stylusPath)
.pipe(stylus()).
pipe(minifyCss())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
Copy the code

Gulp detailed introduction tutorial

conclusion

Standing on the shoulders of giants. Learning is a long process, if there is any inappropriate part in this article, please kindly advise, welcome to exchange and study together, common progress.