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/