Gulp：处理 Less 和 Scss 文件

早在很多年以前，前端开发就不会单纯的只使用css文件了，理由也是比较充分的：使用css不够灵活。长期做前端开发的朋友应该很早开始就不会只写css文件了，也是这个原因。

简述

不够灵活，体现在很多地方，例如样式文件里共用的部分，在css里是没有办法复用的，只能去写很多遍，最常见的就是颜色。例如我的博客目前主题色是黄色，很多地方都会用到这个颜色，如果我在每个用到的颜色的地方都写一遍颜色代码，就会很不方便，而且维护起来也很麻烦，要全部找到那些颜色代码并替换并不是一件十分保险的事。

Less 和 scss 因此应运而生。这里仅以Less举例，Less要解决css样式的复用问题，同时还有一些参数化问题。通过Less语法写好的样式文本，需要经过Less解释器重新解释（也名编译，但作为C程序员用编译这个词个人感觉不太合适，因为这个过程并没有产生二进制文件），Less解释后的文件就是浏览器能够识别的css文件了。

初学者可能有这个问题：把Less再解析成css是不是脱裤子放屁？

还真不是！

Less本质上可以理解成是一个css效率工具，它支持的所有特性仅仅是为了提高css的开发效率和维护效率，最终开发的本质依然是css。就好比写C语言和写Python一样，Python的核心是用C写的，Python最终执行也跟C一样需要编译成二进制机器码（Python是解释器解释脚本），虽然最终本质是一样的，但是Python的可以提高编程效率和一行Python能搞定的事情可能C需要10行。Less和css也属同样的道理。

Less: 我不生产css，我只是css的搬运工。

开始构建

已我目前的博客样式为例，假设有如下 Less 片段：

// 定义主题颜色
@color-theme: #ffc107;
@color-theme-light: lighten(@color-theme, 20%);
@color-theme-dark: darken(@color-theme, 20%);
// 定义文本颜色
@color-text: #4a5568;
@color-text-dark: darken(@color-text, 20%);
@color-text-light: lighten(@color-text, 20%);
// 定义文本大小和行间距
@fsize-text: 16px;
@fsize-small: 12px;
@fsize-large: 20px;
@line-height-text: 1.66;

.blog-content {
  padding: 2rem 0;
  font-size: @fsize-text;
  color: @color-text;
  line-height: @line-height-text;

  h1, h2, h3, h4, h5, h6 {
    color: @color-text-dark;
  }
}

现在需要构建一个自动化任务，可以在我完成Less的修改和保存后，自动将Less文件转码成css文件。基于Gulp构建一个自动的Less to css 是非常方便的，Gulp提供了 gulp-less 插件可供使用。借助 Gulp 的流管理，实现起来非常简单：

// gulpfile.js
const { src, dest, series, task } = require("gulp");
const less = require("gulp-less");

/**
 * 解析Less文件
 */
task("build:less", () => {
  return src("src/less/style.less")
    .pipe(less())
    .pipe(dest("build/css"))
});

exports.default = series("build:less");

在命令行中执行 “build:less” 是非常简单的：

npm run dev
# 或者
gulp

因为上篇文章中约定项目使用 npm 命令作为启动和调试命令，所以这里推荐使用 npm run dev 来开启任务。

执行完成后，就可以在 build/css 目录下看的一个 style.css 文件，打开 css 文件：

.blog-content {
  padding: 2rem 0;
  font-size: 16px;
  color: #4a5568;
  line-height: 1.66;
}
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  color: #20242c;
}

基础构建已经完成。

浏览器前缀

添加浏览器前缀是为了css属性兼容。假设给之前的less加入如下片段：

@bdr-radius: .45rem;
@shadow-cover: 0px 5px 60px 0px rgba(17, 58, 93, 0.1);

.blog-content {
  .cover {
    border-radius: @bdr-radius;
    box-shadow: @shadow-cover;
  }
}

此时希望 border-radius 属性和 box-shadow 属性可以兼容老版本的浏览器，可以使用 gulp-autoprefixer 插件来实现：

const autoprefixer = require("gulp-autoprefixer");

task("build:less", () => {
  return src("src/less/style.less")
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(dest("build/css"))
});

执行转码后的css文件即可自动补全前缀：

.blog-content .cover {
  -webkit-border-radius: 0.45rem;
          border-radius: 0.45rem;
  -webkit-box-shadow: 0px 5px 60px 0px rgba(17, 58, 93, 0.1);
          box-shadow: 0px 5px 60px 0px rgba(17, 58, 93, 0.1);
}

css压缩

可以使用 gulp-minify-css 对 css 进行压缩。

const minicss = require("gulp-autoprefixer");

task("build:less", () => {
  return src("src/less/style.less")
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(minicss())
    .pipe(dest("build/css"))
});

sourcemaps资源映射

使用less转码后的css样式可能存在行号不一致的情况（其实是必然的），所以当我们想修改某个样式属性时，浏览器中看到的行号不一定是less的行号，此时可以使用sourcemap做映射，将转码后的css和转码前的less文本对照起来，方便调试。

使用 gulp-sourcemaps 插件来完成映射，它将生成对应的 map 文件。

const sourcemaps = require("gulp-sourcemaps");

task("build:less", () => {
  return src("src/less/style.less")
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(minicss())
    .pipe(sourcemaps.write("."))
    .pipe(dest("build/css"))
});

此时运行任务，就会在 build/css 目录下生成 style.css.map 文件。

px转rem

为了还原设计稿，可以使用 gulp-pxtorem 插件来转换css中的px为rem。

const pxtorem = require("gulp-pxtorem");

task("build:less", () => {
  return src("src/less/style.less")
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(pxtorem())
    .pipe(autoprefixer())
    .pipe(minicss())
    .pipe(sourcemaps.write("."))
    .pipe(dest("build/css"))
});

自动更新

我们希望每次更改less文件以后gulp都能自动完成转码工作，而不是在命令行中重启任务，此时可以使用 gulp.watch 方法来实现。

const { src, dest, series, task, watch } = require("gulp");

task("build:less", () => {
  return src("src/less/style.less")
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(pxtorem())
    .pipe(autoprefixer())
    .pipe(minicss())
    .pipe(sourcemaps.write("."))
    .pipe(dest("build/css"))
});

watch("src/less/style.less", series("build:less"));

这是使用 npm run dev 以后，终端将不会退出，当每次style.less文件被修改保存后，新的style.css就可以马上被构建出来。

总结

此部分是有关样式表的自动化处理，基于 Gulp 构建，使用Gulp可以提高开发效率，很多重复的工作可以交给Gulp在后台完成，前端开发人员只需要关注前端业务和重点即可。下一篇将介绍 Js 相关的转码、打包和构建过程。