使用 Less 替换 wxss 开发微信小程序

微信小程序开发中默认使用的 wxss 做为样式文件，这货对应成前端就是 CSS 文件，所以通常写 wxss 文件的时候会很痛苦。因为我已经完全放弃了小程序自带的编辑器（参考：wxapp.vim——使用Vim开发小程序利器），于是尝试在微信小程序开发中引入 Less 来自动编译 wxss。

思路

启用一个 gulp 任务，在文件更新的时候自动将 .less 文件编译成 .wxss 文件。

主要用到了 2 个 gulp 插件，gulp-less 和 gulp-rename。前者用来编译 Less 文件，后者用来将编译出来的 css 文件重命名为 .wxss。

实现

代码：

var lessPath = ['./app/**/**/*.less', './app/**/*.less'];

/**
* 本地监视less的文件
*/
gulp.task('less', function () {
  return gulp.src(lessPath)
    .pipe($.plumber())
    .pipe($.less())
    .pipe($.rename(function (path) {
      path.extname = '.wxss';
    }))
    .pipe(gulp.dest('./app'));
});

// 静态服务器
gulp.task('style', function () {
  gulp.watch(lessPath, ['less']);
});

使用

开发前运行 gulp style，剩下的事情就是写 Less 了，再不也用管什么 wxss 了。