小程序使用sass

前因

最近在写小程序，小程序原生wxss不支持less与sass语法，而习惯这些语法之后就不是很想写css了。又因为不想用wepy这样的框架所以用gulp写了个打包脚本，编译scss文件成wxss。(不用webpack是因为我理解的webpack是要有一个入口，直接只打包sass我不知道怎么做)

思路

监听小程序目录下所有的scss文件，使用gulp-sass编译成css文件，然后利用gulp-rename重命名css为wxss，保存到sass所在目录下，这样编译后的wxss文件就与对应的js、json文件在同一个目录了。

项目目录

image

因为我的小程序是云开发项目，所以有cloudfunctions目录，如果不是的话稍微改下目录配置就可以了

gulpfile

先上配置文件：

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

// 嵌套输出方式 nested
// 展开输出方式 expanded 
// 紧凑输出方式 compact 
// 压缩输出方式 compressed
taskSass = ()  => {
  console.log("sass buld")

}
gulp.task("sass", () => {
  // 记得return，否者会卡在这个地方，无法执行下一次监听的回调
  return gulp.src("./miniprogram/**/*.scss",{"base": ''})
  .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
  .pipe(rename({
    // dirname: "main/text/ciao",
    // basename: "aloha",
    // prefix: "bonjour-",
    // suffix: "-hola",
    extname: ".wxss"
  }))
  .pipe(gulp.dest('miniprogram'))
})

gulp.task('watch',function(){
    gulp.watch("./miniprogram/**/*.scss",  gulp.parallel("sass"))
});

相信懂gulp的同学应该一下子就能看懂做了什么东西。如果不懂得话花点时间看下文档

gulp4 官方文档

Gulp 4 入门指南

需要注意的是因为我是用的gulp版本是4.0.0，所以有些写法和之前是不一样的。

1. 比如watch，现在的第二个参数必须是一个fucntion，不能是['sass'],我网上看的配置都是以前的版本，所以这里卡了一下。
2. task的方法参数记得return 否则gulp打包的时候不知道什么时候完成这个任务就会一直卡在这个任务，导致下次文件变化之后无法更新。（之前版本好像也是不需要return）

TODO

• [ ] css与wxss还是有去别的，css无法引入样式，而wxss可以，现在时将其编译成css重命名而已，所以会把引用的文件整个一起打包进去，打包后的文件会比原来的大
• [ ] 小程序支持async awawit写法