使用 gulp 编译 LESS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 gulp 编译 LESS相关的知识,希望对你有一定的参考价值。

请务必理解如下章节后阅读此章节:

  1. 安装 Node 和 gulp
  2. 使用 gulp 压缩 JS

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护。

安装

npm install gulp-less

基本用法

// 获取 gulp
var gulp = require(‘gulp‘)
// 获取 gulp-less 模块
var less = require(‘gulp-less‘)

// 编译less
// 在命令行输入 gulp less 启动此任务
gulp.task(‘less‘, function () {
    // 1. 找到 less 文件
    gulp.src(‘less/**.less‘)
    // 2. 编译为css
        .pipe(less())
    // 3. 另存文件
        .pipe(gulp.dest(‘dist/css‘))
});

// 在命令行使用 gulp auto 启动此任务
gulp.task(‘auto‘, function () {
    // 监听文件修改,当文件被修改则执行 less 任务
    gulp.watch(‘less/**.less‘, [‘less‘])
})

// 使用 gulp.task(‘default‘) 定义默认任务
// 在命令行使用 gulp 启动 less 任务和 auto 任务
gulp.task(‘default‘, [‘less‘, ‘auto‘])

LESS 代码和编译后的CSS代码

less/a.less

.less{
    a{
        color:pink;
    }
}

less/import.less

@import "a.less";
.import{
    a{
        color:red;
    }
}

less/a.css

.less a {
  color: pink;
}

less/import.css

.less a {
  color: pink;
}
.import a{
  color: red;
}

 

接着阅读:使用 gulp 编译 Sass

以上是关于使用 gulp 编译 LESS的主要内容,如果未能解决你的问题,请参考以下文章

gulp教程之gulp-less

gulp-less使用

laravel 中 与前端的一些事3 之使用Gulp编译less

使用 gulp 编译 Sass

Gulp 使用 @import 监视和编译更少的文件

gulp编译less简单demo