序
关于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