关于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 文件中创立命令，代码如下所示：

// 获取 gulpvar 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

而后同样是创立工作：

// 获取 gulpvar 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/