前言

以前微信开发工具不支持打卡scss文件,每次一个小改动,都要切换其他编辑器编译,感觉比较麻烦.最近 RC Build (1.02.2001191) 的开发工具支持打开scss文件,这算是一个福音,然而如何编译成wxss却没有说明,所以自己利用gulp在开发工具中直接编译,很方便.

使用

1、在项目与app.js同级目录中新建文件gulpfile.js

加入内容如下:

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

//自动监听
gulp.task('default', gulp.series(function() {
  watcher('./pages/**/*.scss', function(){
    miniSass();
  });
}));

//手动编译
gulp.task('sass', function(){
  miniSass();
});

function miniSass(){
  return gulp.src('./pages/**/*.scss')//需要编译的文件
    .pipe(sass({
      outputStyle: 'expanded'//展开输出方式 expanded 
     }))
     .pipe(rename((path)=> {
      path.extname = '.wxss'
    }))
    .pipe(changed('./pages'))//只编译改动的文件
    .pipe(gulp.dest('./pages'))//编译
    .pipe(rename((path)=> {
      console.log('编译完成文件：' + 'pages\\' + path.dirname + '\\' + path.basename + '.scss')
    }))
}

复制代码

2、打开命令行,进入gulpfile.js所在目录,执行如下命令

• npm install
• gulp-sass
• gulp-rename
• gulp-changed

3、执行监听命令

• gulp

会监听pages目录的scss的变动,保存后会自动保存.