- 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 要處理的源文件。它會(huì)匹配 ./src/styles/ 目錄下的所有 less 文件，但不包括 ./src/styles/common/ 目錄下的 less 文件。
pipe() 方法用于將操作連接起來，形成一個(gè)處理流程。
less({plugins: [autoprefix], javascriptEnabled: true})：這一行是使用 less 插件對(duì) less 文件進(jìn)行編譯。其中，plugins: [autoprefix] 表示使用 autoprefix 插件自動(dòng)添加 CSS 前綴，javascriptEnabled: true 表示允許在 less 文件中使用 JavaScript。
cleanCSS()：這一行是使用 cleanCSS 插件對(duì)編譯后的 CSS 進(jìn)行壓縮。
gulp.dest('./es/styles')：這一行是指定處理后的文件輸出的目錄，即將處理后的文件保存到 ./es/styles 目錄下。
return gulp...：最后，這個(gè)任務(wù)返回了整個(gè)處理流程，這樣 Gulp 就知道這個(gè)任務(wù)何時(shí)完成。
命令行配置
"build:css": "rimraf ./es/styles && gulp --gulpfile ./gulpfile.js",
rimraf 是一個(gè) Node.js 內(nèi)置 的庫，提供了類似 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
