微信小程序通过gulp把scss文件编译为wxss文件

一、全局下载gulp

npm i gulp -g

二、初始化npm

npm init -y

三、项目根目录下载相关依赖

npm i gulp gulp-changed gulp-rename gulp-sass gulp-watch sass -D

四、项目根目录创建gulpfile.js文件

const gulp = require('gulp')
const sass = require('gulp-sass')(require('sass'))
const rename = require('gulp-rename')
const changed = require('gulp-changed')
const watcher = require('gulp-watch')

gulp.task('default', gulp.series(function () {
  watcher('../mini-code/pages/**/*.scss', function () {
    miniSass('pages')
  })
  watcher('../mini-code/component/**/*.scss', function () {
    miniSass('component')
  })
}))

gulp.task('sass', function () {
  miniSass('pages')
  miniSass('component')
})

function miniSass(folder) {
  return gulp.src('../mini-code/' + folder + '/**/*.scss')
    .pipe(sass({
      outputStyle: 'compressed'
    }))
    .pipe(rename((path) => {
      path.extname = '.wxss'
    }))
    .pipe(changed('../mini-code/' + folder))
    .pipe(gulp.dest('../mini-code/' + folder))
    .pipe(rename(path => {
      console.log('编译完成文件：' + '..\\mini-code\\' + folder + '\\' + path.dirname + '\\' + path.basename + '.scss')
    }))
}

命令行输入 gulp 就可以运行了，如果scss文件语法错误会停止监听以及编译，修改为正确的语法，重新输入 gulp 就行。

目前使用这种方法同时监听pages和component两个文件夹下的scss文件，但是存在一些问题，正在寻找解决方案。