gulp打包scss文件（五）

下载插件：

npm install sass gulp-sass -D

导入：

const sass = require ( 'gulp-sass' ) ( require ( 'sass' ) )

注意：很多人员在下载插件的时候只喜欢下载gulp-saa插件，但是如果只下载该插件，在执行gulp sassHandler命令打包的时候会报错，导致打包失败，并且报错，报错结果如下：

 为了解决报错问题，在安装插件的时候一定要安装sass插件和gulp-sass插件，即可解决

gulpfile.js文件中压缩css以及压缩sass代码如下：

// 该文件书写我本个项目的打包配置流程

/**
 执行一个gulp配置好的任务
  直接打开命令行，切换到gulpfile.js所在的目录
  执行命令gulp 任务名称
 * ***/ 

// 因为gulp是依赖于Node环境运行的，将来的运行也是以node为基础运行
// 所以书写gulpfile.js文件就是按照node的模块化语法进行书写（即commonJS）
// const gulp = require('gulp')

// // 1.导入gulp-cssmin
// const cssmin = require('gulp-cssmin')

// // 1.创建一个打包css的任务
// // gulp@3的标准书写语法
// gulp.task('cssHandler', function() {
//   // 需要补货到该任务的结束，需要把这个流return出去
//   // task就会处理流
//   return gulp
//     .src('./src/css/*.css') // 1-1 找到源文件
//     .pipe(cssmin()) // 1-2压缩文件
//     .pipe(gulp.dest('./dist/css/')) // 1-3将压缩好的内容放到指定目录下
// })

// 1.创建一个打包css的任务
// gulp@4的标砖书写，需要在gulpfile.js文件里面把这个函数名导出
// const cssHandler = function () {
//   return gulp
//   .src('./src/css/*.css')
//   .pipe(cssmin())
//   .pipe(gulp.dest('./dist'))
// }

// module.exports.cssHandler = cssHandler

// 书写gulp配置文件
// 0. 导入第三方
// 0-1.导入gulp
const gulp = require('gulp')
// 0-2.导入gulp-cssmin
const cssmin = require('gulp-cssmin')
// 0-3.导入gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 0-4.导入gulp-sass
const sass = require ( 'gulp-sass' ) ( require ( 'sass' ) )


// 1.创建任务
// 1-1.创建爱你一个打包css的任务
const cssHandler = function () {
  return gulp
    .src('./src/css/*.css') //1.找到内容
    .pipe(autoPrefixer()) // 2.自动添加前缀
    .pipe(cssmin()) // 3.压缩
    .pipe(gulp.dest('./dist/css/')) //4.放到指定目录
}

// 1-2 创建一个打包sass文件的任务
const sassHandler = async function () {
  return await gulp
    .src('./src/sass/*.scss')  //1.找到内容
    .pipe(sass()) // 2.转换scss
    .pipe(autoPrefixer()) // 3.自动添加前缀
    .pipe(cssmin()) // 4.压缩
    .pipe(gulp.dest('./dist/sass/')) //5.放到指定目录
}

// 2.导出任务
// 2-1.导出打包的css的任务
module.exports.cssHandler = cssHandler
// // 2-2.导出打包的sass任务
module.exports.sassHandler = sassHandler

补充说明：

sass转码的使用

有一种方式叫做导入sass文件，如果你需要用到导入，你可以把变量和混合定义在.sass后缀的文

件中，而gulp配置只会转码.scss文件，在.sass文件中配置的变量和混合器文件不会被转码。但是

当转码.scss文件的时候，会自动读取.sass文件里的变量，会给我们解析以后使用

 在.scss文件中引入.sass文件中定义的变量并使用：

 执行gulp sassHandler 命令后：