首先說明下問題
想要構(gòu)建一個自己的UI組件庫裆甩，所有的樣式文件分離旭等，不在組件文件中書寫忆某，打包的時候，用到了gulp打包工具烈菌，將分離出來的樣式文件，編譯同步打包到dist文件下花履，遇到了這樣一些問題：
錯誤信息
task任務(wù)的回調(diào)函數(shù)前必須加上 async 構(gòu)成異步函數(shù) 例如：
// 按照Iview源碼里面的配置如下：(這個是每次運行都會報錯)
const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");
const less = require("gulp-less");
const rename = require("gulp-rename");
const autoprefixer = require("gulp-autoprefixer");
// 編譯less
gulp.task("css", function() {
gulp
.src("../src/styles/index.less")
.pipe(less())
.pipe(
autoprefixer({
browsers: ["last 2 versions", "ie > 8"],
})
)
.pipe(cleanCSS())
.pipe(rename("ys-ui.css"))
.pipe(gulp.dest("../dist/styles"));
});
gulp.task("default", ["css"]);
修改后的正確配置
const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");
const less = require("gulp-less");
const rename = require("gulp-rename");
const autoprefixer = require("gulp-autoprefixer");
// 編譯less
gulp.task("css", async () => {
gulp
.src("../src/styles/index.less")
.pipe(less())
.pipe(
autoprefixer({
overrideBrowserslist: ["last 2 versions", "ie > 8"],
})
)
.pipe(cleanCSS())
.pipe(rename("ys-ui.css"))
.pipe(gulp.dest("../dist/styles"));
});
gulp.task("default", gulp.series(["css"]));
這樣就能解決上面的報錯問題了芽世。
gulp-autoprefixer高版本還會存在一個問題，就是配置關(guān)鍵字的修改诡壁，之前的都是低版本配置济瓢。
image.png
如果報錯是這個，就直接修改這里就好了：
image.png
