gulp-less gulp打包处理less

序

关于less：

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。
Less 扩充了 CSS 语言，增加了诸如变量、混合（mixin）、运算、函数等。 Less 既可以运行在服务器端（Node.js 和 Rhino 平台）也可以运行在客户端（浏览器）。

那gulp-less有是什么呢？

gulp-less一个gulp自动化构件工具的一个插件，专门用来处理less文件使其产出css文件提供给生产环境使用。

gulp基本安装

安装有node.js+npm+git-bash的window x64系统电脑安装命令：

$ npm i -g gulp
$ mkdir css-project && cd css-project
$ npm init -y
$ npm i -D gulp

@小白：详细安装技巧请查看gulp 安装与入门

gulp简单打包处理less

1. 开发依赖安装

$ npm i -D gulp-less

2. gulpfile.js配置

const gulp = require('gulp')
const less = require('gulp-less')

gulp.task('less', function () {
    return gulp.src('./src/style/*.less')//待处理的目标目录下的所有less文件
        .pipe(less())//采用less的默认方式处理less产出css
        .pipe(gulp.dest('./dist/css'))//输出到“./dist/css”路径
})

3.打包命令

$ gulp less

gulp打包处理less（兼容各大主流浏览器）

1. 开发依赖

$ npm i -D gulp-less gulp-concat gulp-rename gulp-autoprefixer gulp-cssnano

如果您不喜欢gulp-cssnano，你可以使用gulp-cssmin来代替。

2. gulpfile.js配置

const gulp = require('gulp')
const less = require('gulp-less')
const concat = require('gulp-concat')
const rename = require('gulp-rename')
const autoprefix = require('gulp-autoprefixer')
const cssnano = require('gulp-cssnano')

gulp.task('less-autoprefix', function () {
    return gulp.src('./src/style/*.less') //待处理的目标目录下的所有less文件
        .pipe(less()) //采用less的默认方式处理less产出css
        .pipe(concat('style.css')) //拼接成一个文件，并命名为style.css
        .pipe(cssnano()) //如果使用cssnano需要在autoprefix之前调用，否则后者无效
        .pipe(autoprefix({ //自动添加兼容浏览器的样式前缀，例如：-webkit-, -mo-
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(rename({ //重命名为style.min.css
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css')) //输出到“./dist/css”路径
})

3.打包命令

$ gulp less-autoprefix

---

友情连接

gulp-less
gulp-cssmin
gulp-rename
gulp-concat
gulp-autoprefixer
gulp-sourcemaps
gulp-cssnano

---

谢谢关注，欢迎点赞：）