评论

微信开发工具直接编译scss文件

以前微信开发工具不支持打卡scss文件,每次一个小改动,都要切换其他编辑器编译,感觉比较麻烦.最近 RC Build (1.02.2001191) 的开发工具支持打开scss文件,就可以编译

前言


以前微信开发工具不支持打卡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的变动,保存后会自动保存.

最后一次编辑于  02-12  
点赞 0
收藏
评论
登录 后发表内容