关于gulp: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/