- gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');
var LessAutoprefix = require('less-plugin-autoprefix');
var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
gulp.task('less', function () {
return gulp
.src(['./src/styles/*.less', '!./src/styles/common/*.less'])
.pipe(
less({
plugins: [autoprefix],
javascriptEnabled: true
})
)
.pipe(cleanCSS())
.pipe(gulp.dest('./es/styles'));
});
gulp.task(
'default',
gulp.series(gulp.parallel('less'), function (cb) {
cb();
})
);
- 说明：
gulp.src(['./src/styles/.less', '!./src/styles/common/.less'])：这一行是指定 Gulp 要处理的源文件。它会匹配 ./src/styles/ 目录下的所有 less 文件，但不包括 ./src/styles/common/ 目录下的 less 文件。
pipe() 方法用于将操作连接起来，形成一个处理流程。
less({plugins: [autoprefix], javascriptEnabled: true})：这一行是使用 less 插件对 less 文件进行编译。其中，plugins: [autoprefix] 表示使用 autoprefix 插件自动添加 CSS 前缀，javascriptEnabled: true 表示允许在 less 文件中使用 JavaScript。
cleanCSS()：这一行是使用 cleanCSS 插件对编译后的 CSS 进行压缩。
gulp.dest('./es/styles')：这一行是指定处理后的文件输出的目录，即将处理后的文件保存到 ./es/styles 目录下。
return gulp...：最后，这个任务返回了整个处理流程，这样 Gulp 就知道这个任务何时完成。
命令行配置
"build:css": "rimraf ./es/styles && gulp --gulpfile ./gulpfile.js",
rimraf 是一个 Node.js 内置 的库，提供了类似 Unix 命令 rm -rf 的功能，用于删除文件和文件夹
让 gulpfile 文件支持 import 替换 require
- 将 gulpfile.js 改名为 gulpfile.esm.js
import gulp from 'gulp';
import less from 'gulp-less';
import cleanCSS from 'gulp-clean-css';
import LessAutoprefix from 'less-plugin-autoprefix';
var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
gulp.task('less', function () {
return gulp
.src(['./src/styles/*.less', '!./src/styles/common/*.less'])
.pipe(
less({
plugins: [autoprefix],
javascriptEnabled: true
})
)
.pipe(cleanCSS())
.pipe(gulp.dest('./es/styles'));
});
gulp.task(
'default',
gulp.series(gulp.parallel('less'), function (cb) {
cb();
})
);
- 修改 package.json 命令
"build:css": "rimraf ./es/styles && gulp --require esm",
- 安装 esm
yarn add -D esm
