使用 Pug 和 Stylus 开发小程序的 watch 脚本

首先，我试用了 Wepy，丑的一逼，遂放弃。

小程序开发有两点比较蛋痛：

1. 每个页面必须有3个文件，wxml，js，wxss
2. 使用 wxml 替代 html，使用 wxss 替代 css，使得默认的编译失效

Webpack 在这里不太适用，因为 1，我们并非要把所有代码打包到一起。WebStorm 的 File Watcher 也不适用，因为它输出的文件扩展名是固定的（跟 pug 和 stylus 源程序有关）。于是我经过摸索了，使用 gulp 脚本解决了这个问题，代码如下：

import gulp from 'gulp';
import pug from 'gulp-pug';
import rename from 'gulp-rename';

const pugFiles = 'pages/**/*.pug';

// 通用的 pug 处理，可以把 pug 转译并改名为 .wxml 文件
async function doPUG(path) {
  gulp.src(path)
    .pipe(pug())
    .pipe(rename({
      extname: '.wxml',
    }))
    .pipe(gulp.dest('./pages'));
}

// 将所有 pug 进行转译
gulp.task('pug', async () => {
  return doPUG(pugFiles);
});

// 侦听 .pug 文件的变化，并转译被修改的
gulp.task('watch', ['pug'], () => {
  gulp.watch(pugFiles, ({path}) => {
    doPUG(path);
  });
});

接下来，开发的时候，只要运行 gulp watch 即可。

用类似的方式，我们还能处理 stylus -> css，这里就不详述了，大家可以自己试一试。

完整的 gulpfile 在 GitHub 仓库里，请自行取用。