gulp打包样式

gulp是一个任务流构建工具，用于自动化重复任务，如打包样式、压缩图片等。它基于Node.js和Gulp.js库构建，使用JavaScript编写任务流。 虽然随着前端工程化的流行，gulp的使用已经减少，但是在处理样式打包时，它仍然是一个有用的工具。 以下是一个简单的gulp任务流示例，用于打包Sass文件并压缩CSS代码。

gulpfile.js

import gulp from "gulp";
import cleanCSS from "gulp-clean-css";
import autoprefixer from "gulp-autoprefixer";
import sourcemaps from "gulp-sourcemaps";
import gulpSass from "gulp-sass";
import * as dartSass from "sass";

const sass = gulpSass(dartSass);
function compileSassProduction() {
  return (
    gulp
      .src("src/styles/**/*.scss")
      //  return gulp.src('src/styles/index.scss')
      .pipe(sourcemaps.init()) // 初始化sourcemap
      .pipe(sass().on("error", sass.logError))
      .pipe(
        autoprefixer({
          // 自动添加浏览器厂商前缀
          cascade: false,
        }),
      )
      .pipe(cleanCSS({ compatibility: "ie8" })) // 压缩CSS代码
      .pipe(sourcemaps.write(".")) // 将sourcemap写入单独的文件（例如：styles.css.map）
      .pipe(gulp.dest("dist/css"))
  );
}

export const build = compileSassProduction;