Gulp实践后编译器与less预编译器

less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
安装：$ npm install -g less

1、开始实践 新建一个文件夹 存放以下文件

4.png

all.less作为一个整体less文件的入口

@import 'variable.less';
@import 'common.less';
@import 'index.less';

新建一个变量文件 variable.less 专门存放声明的变量

@baseColor: red;
.rounderCorner(@size: 4px){
    border-radius: @size;
}

index.less

p {
    color:@baseColor;
}

common.less

.btn{
    .rounderCorner(3px)
}

2、使用gulp-less处理这些文件

安装 npm install gulp-less
在gulp的配置文件里面设置
引入less

var less =require('gulp-less')

处理less文件

function css() {
    var plugins = [
        autoprefixer({browsers: ['last 1 version']}),
    ]
    return src('./src/less/all.less')
            .pipe(sourcmaps.init())
            .pipe(less())
            .pipe(cssnano())
            .pipe(postcss(plugins))
            .pipe(concat('merge.css'))
            .pipe(sourcmaps.write('.'))
            .pipe(dest('./dest'))
}

就是很简单的 src倒入物料，通过pipe管道逐个工序加工（资源定位初始化，less处理，css压缩，postcss后编译处理，将所有数据流连接到merge.css文件上，资源定位文件写入，“.”就是当前文件夹，最后在dest出成果），一条生产流水线

exports.css =css;
exports.default = parallel(css)

最后就执行这个流水线。

后编译器 postcsss

postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。
postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：

1 . 使用下一代css语法

2 . 自动补全浏览器前缀

3 . 自动把px代为转换成rem（rem不熟悉的，点这）

4 . css 代码压缩等等

上面的代码也使用了postcss配合autoperfixer实现了浏览器的兼容问题

目前犯了一个错误
就是引入autoperfixer的时候，误以为他也是gulp的一个插件

const autoprefixer = require('autoprefixer');  //这是正确的引入

//2019-8-28