//安装gulp

npm i gulp gulp-sass gulp-minify-css -D

//新建gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const minifyCSS = require('gulp-minify-css');

gulp.task('sass', async funtion(){
    return gulp,src('components/css/**/*.scss')
    .pipe(sass()); //将sass转成css
    .pipe(minifyCSS()); //压缩
    .pipe(gulp.dest('dist/css')); //输出到打包目录
})

//新建index.scss样式汇总

@import "./demo.scss";
@import "./card.scss";

//在package.json中配置

"scripts":{
    "build:css":"npx gulp sass"
    "build": "npm run build:js && npm run build:css"
}

1. 在css文件夹下设置一个inde文件，将各个sass文件引入，这样打包出一个css文件

2. 在package命令中重新设置命令，使js打包和css打包一起执行

3. 
   

gulp-sass:处理sass文件的库；

minify-css:处理css压缩的库

之后在gulp.task函数中‘流’式的处理：

1. 先获取包的位置（**代表所有的文件）

2. 对文件进行下一步引用sass()函数进行处理解析成css

   3.对文件进行压缩处理

   4.对文件输出位置进行设置

   5.在package文件中设定css打包时候的指令，之后运行后在对应输出文件地址查看打包文件