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


谢谢关注,欢迎点赞:)

猜你喜欢

转载自blog.csdn.net/weixin_41424247/article/details/79883908
今日推荐