Gulp 编译Less和Sass

在实际应用中，我们一般会使用 CSS 的预处理器来编写 CSS 代码，例如 Less 和 Sass 语言，通过将脚本解析成 CSS 的脚本语言，可以减少 CSS 的重复，也可以节省时间。

本节我们来学习如何通过 gulp 将 Less 和 Sass 编译成 CSS 代码。将 Less 编译成 CSS 需要使用 gulp-less 插件，将 Sass 编译成 CSS 需要用到 gulp-ruby-sass 插件。

将Less编译成CSS

例如在项目根目录下的 less 文件夹中有一个 style.less 文件，文件内容如下所示：

div{
    color: #ccc;
    a{
        color: white;
        font-size: 16px;
    }
    p{
        font-size: 14px;
        line-height: 30px;
    }
}

我们需要将这个 style.less 文件代码编译成 CSS 代码。

首先需要安装 gulp-less 插件，安装命令如下所示：

npm install gulp-less

安装好插件后，我们可以在 gulpfile.js 文件中创建命令，代码如下所示：

// 获取 gulp
var gulp = require('gulp')
var gulp_less = require('gulp-less')

gulp.task('less', function(cb) {
    gulp.src('less/*.less')
        .pipe(gulp_less())
        .pipe(gulp.dest('dist/css'))
        cb()
})

然后我们执行 gulp less 命令：

此时我们会看到 dist 目录下的 css 文件夹中，生成了一个 style.css 文件，文件内容如下所示，这就是 less 编译后的 CSS 代码：

div {
  color: #ccc;
}
div a {
  color: white;
  font-size: 16px;
}
div p {
  font-size: 14px;
  line-height: 30px;
}

将Sass编译成CSS

将 Sass 代码编译成 CSS代码，其实和 Less 编译成 CSS 差不多，就是使用到的插件不同，需要用到一个 gulp-ruby-sass 插件。

安装命令如下所示：

npm install gulp-ruby-sass

然后同样是创建任务：

// 获取 gulp
var gulp = require('gulp')
var gulp_sass = require('gulp-ruby-sass')

gulp.task('sass', function(cb) {
    return gulp_sass('sass/*.scss')
    .on('error', function(err){
        console.error('Error!', err.message);
    })
    .pipe(gulp.dest('dist/css'))
    cb()
})

执行 gulp sass 命令，Sass 文件会成功被编译成 CSS。

链接：https://www.9xkd.com/