微信小程序开发中默认使用的 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 了。
