您的位置：首页 > Web前端 > CSS

gulp插件(5) - gulp-less(编译less文件)

2017-02-28 22:59 453 查看

功能描述

将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

插件安装

$ cnpm install gulp-less --save-dev

使用方法

例1：基本使用

var gulp   = require('gulp'),
less   = require('gulp-less'),
pump   = require('pump');

gulp.task('testLess', function (cb) {
pump([
gulp.src('src/less/index.less'),
less(),
gulp.dest('src/css')
], cb)
});

例2：编译多个less文件

var gulp   = require('gulp'),
less   = require('gulp-less'),
pump   = require('pump');

gulp.task('testLess', function (cb) {
pump([
gulp.src(['src/less/index.less','src/less/detail.less']),
less(),
gulp.dest('src/css')
], cb)
});

例3：匹配符“!”，“”，“*”，“{}”

var gulp   = require('gulp'),
less   = require('gulp-less'),
pump   = require('pump');

gulp.task('testLess', function (cb) {
pump([
//编译src目录下的所有less文件
//除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）
gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less']),
less(),
gulp.dest('src/css')
], cb)
});

例4：与插件gulp-clean-css(不会用？请参考)组合使用，实现编译、压缩一步操作

var gulp      = require('gulp'),
less      = require('gulp-less'),
minifyCss = require('gulp-clean-css'),
pump      = require('pump');

gulp.task('testLess', function (cb) {
pump([
gulp.src(['src/less/index.less']),
less(),           // 编译
minifyCss(),      // 压缩
gulp.dest('src/css')
], cb)
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： gulp less gulp-less clean-css

相关文章推荐

新的分享

章节导航