gulp-less使用

Posted 2020-09-03 青靖

简介：

　　使用gulp-less插件将less文件编译成CSS。

1、安装gulp-less

在命令行里使用npm install gulp-less --save-dev ;

2、配置gulpFile.js

2.1基本使用

var gulp = require(‘gulp‘),           //获取gulp模块
    less = require(‘gulp-less‘);      //获取gulp-less插件
 
gulp.task(‘testLess‘, function () {   //创建gulp任务
    gulp.src(‘src/less/index.less‘)   //获取less文件路径
        .pipe(less())　　　　　　　　   //执行less
        .pipe(gulp.dest(‘src/css‘));  //输出CSS文件路径
});

　2.2编译多个less文件

　

var gulp = require(‘gulp‘),           //获取gulp模块
    less = require(‘gulp-less‘);      //获取gulp-less插件
 
gulp.task(‘testLess‘, function () {   //创建gulp任务
    gulp.src([‘src/less/index.less‘,‘src/less/detail.less‘])   //获取多个less文件路径
        .pipe(less())　　　　　　　　   //执行less
        .pipe(gulp.dest(‘src/css‘));  //输出CSS文件路径
});

　2.3匹配符使用

var gulp = require(‘gulp‘),           //获取gulp模块
    less = require(‘gulp-less‘);      //获取gulp-less插件
 
gulp.task(‘testLess‘, function () {   //创建gulp任务
    gulp.src(‘src/less/*.less‘])   //获取所有less文件路径
        .pipe(less())　　　　　　　　   //执行less
        .pipe(gulp.dest(‘src/css‘));  //输出CSS文件路径
});

　3.3多模块使用先编译再压缩

var gulp = require(‘gulp‘),
    less = require(‘gulp-less‘),
     //确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev]
    cssmin = require(‘gulp-minify-css‘);
 
gulp.task(‘testLess‘, function () {
    gulp.src(‘src/less/index.less‘)
        .pipe(less())　　//执行编译
        .pipe(cssmin()) //对编译后的CSS进行压缩
        .pipe(gulp.dest(‘src/css‘));
});