最近我厂官网改版,我尝试用 Webpack 重建了开发工具链,效果不错,配置代码少了很多,逻辑更加简单清晰。我觉得值得拿出来分享一下。
文章已经发布,慢慢写了将近5w字,干货很多,覆盖面很广,欢迎大家前去阅读:升级工具链吧!使用 Webpack 开发企业官网。感谢大家的支持。
交流应该会通过直播进行,暂定7月中吧,斗鱼直播间:douyu.tv/meathill。
最近我厂官网改版,我尝试用 Webpack 重建了开发工具链,效果不错,配置代码少了很多,逻辑更加简单清晰。我觉得值得拿出来分享一下。
文章已经发布,慢慢写了将近5w字,干货很多,覆盖面很广,欢迎大家前去阅读:升级工具链吧!使用 Webpack 开发企业官网。感谢大家的支持。
交流应该会通过直播进行,暂定7月中吧,斗鱼直播间:douyu.tv/meathill。
一般来说 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)
首先,我试用了 Wepy,丑的一逼,遂放弃。
小程序开发有两点比较蛋痛:
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 仓库里,请自行取用。