前因
最近在写小程序，小程序原生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的同学应该一下子就能看懂做了什么东西。如果不懂得话花点时间看下文档
需要注意的是因为我是用的gulp版本是4.0.0，所以有些写法和之前是不一样的。
- 比如watch，现在的第二个参数必须是一个fucntion，不能是['sass'],我网上看的配置都是以前的版本，所以这里卡了一下。
- task的方法参数记得return 否则gulp打包的时候不知道什么时候完成这个任务就会一直卡在这个任务，导致下次文件变化之后无法更新。（之前版本好像也是不需要return）
TODO
- [ ] css与wxss还是有去别的，css无法引入样式，而wxss可以，现在时将其编译成css重命名而已，所以会把引用的文件整个一起打包进去，打包后的文件会比原来的大
- [ ] 小程序支持async awawit写法
