gulp 将 less 打包成 css

• 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

1. 将 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();
  })
);

2. 修改 package.json 命令

"build:css": "rimraf ./es/styles && gulp --require esm",

3. 安装 esm

yarn add -D esm