stylus – 山维空间

GitChat: 使用 webpack 开发企业官网

最近我厂官网改版，我尝试用 Webpack 重建了开发工具链，效果不错，配置代码少了很多，逻辑更加简单清晰。我觉得值得拿出来分享一下。

文章已经发布，慢慢写了将近5w字，干货很多，覆盖面很广，欢迎大家前去阅读：升级工具链吧！使用 Webpack 开发企业官网。感谢大家的支持。

交流应该会通过直播进行，暂定7月中吧，斗鱼直播间：douyu.tv/meathill。

Stylus 实现 `content: “5”`

一般来说 Stylus 对属性是直接替换的，所以正常来说下面的 stylus

$a = 10

.foo::before
  content $a

会编译成：

.foo::before {
  content: 10;
}

这样是非法的，10 不会渲染出来。如果想让它渲染出来，必须用字符串。如果只有一个值，那就好办了，直接 $a = '10' 就好。但如果在循环里，就比较麻烦，此时，可以用 '' + 10 转换成字符串，或者使用 s(template, value)，以下两种方式是等效的。

// 注意运算顺序哦
.foo
  for n in 1..5
    &:nth-child({n})::before
      $str = '' + (5 - n)
      content $str

  for n in 1..5
    &:nth-child({n})::after
      $str = 5 - n
      content s('"%s"', $str)

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

小程序开发有两点比较蛋痛：1. 每个页面必须有3个文件，wxml，js，wxss；2. 使用 wxml 替代 html，使用 wxss 替代 css，使得默认的编译失效。这个脚本用来帮助我们使用 pug 和 stylus 进行开发。

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

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

每个页面必须有3个文件，wxml，js，wxss
使用 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 仓库里，请自行取用。