简介:
使用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‘)); });
时间: 2024-10-07 23:51:29