文章目录
  1. 1. gulp 构建小程序
    1. 1.1. 简单的 copy
    2. 1.2. 文件编译
    3. 1.3. watch 任务
    4. 1.4. 最终任务
    5. 1.5. 项目目录结构
  2. 2. 结束语

虽然 webpack 用的比较多,不过在小程序这种场景下,简单的 gulp 也是个不错的选择吧~

gulp 构建小程序


简单的 copy

对小程序来说,除了app.js作为程序入口之外,每个page页面都可以作为一个页面入口,更倾向是固定路径模式的多页应用。

最终提交的代码,便是这种结构的代码:

1
2
3
4
5
6
7
8
9
10
11
12
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js

所以,在编译的过程,很多文件都是需要简单地 copy 到目标目录的。我们定义复制和变动复制的任务:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 待复制的文件,不包含需要编译的文件
var copyPath = [
"src/**/!(_)*.*",
"!src/**/*.less",
"!src/**/*.ts",
"!src/img/**"
];
// 复制不包含需要编译的文件,和图片的文件
gulp.task("copy", () => {
return gulp.src(copyPath, option).pipe(gulp.dest(dist));
});
// 复制不包含需要编译的文件,和图片的文件(只改动有变动的文件)
gulp.task("copyChange", () => {
return gulp
.src(copyPath, option)
.pipe(changed(dist))
.pipe(gulp.dest(dist));
});

文件编译

我们想要用高级语法,想要写async/await,想要用less来写样式,想要用typescript来写代码,则需要针对每种文件做编译。

这里用ts来举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
var sourcemaps = require("gulp-sourcemaps");
var tsPath = ["src/**/*.ts", "src/app.ts"]; // 定义ts文件
// 编译
gulp.task("tsCompile", function() {
return tsProject
.src(tsPath)
.pipe(sourcemaps.init())
.pipe(tsProject())
.js.pipe(sourcemaps.write()) // 添加sourcemap
.pipe(gulp.dest("dist")); // 最终输出到dist目录对应的位置
});

当然,用到 typescript 的话,也记得把tsconfig.jsontslint.json加上哇。

watch 任务

在我们写代码的时候,就需要监听文件变动并自动复制、编译和更新,这时候我们就需要 watch 任务:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//监听
gulp.task("watch", () => {
gulp.watch(tsPath, gulp.series("tsCompile")); // ts编译
var watcher = gulp.watch(copyPath, gulp.series("copyChange")); // 复制任务
gulp.watch(watchLessPath, gulp.series("less")); // less处理
gulp.watch(imgPath, gulp.series("imgChange")); // 图片处理
watcher.on("change", function(event) {
// 删除的时候,也更新删除任务到目标文件夹
if (event.type === "deleted") {
var filepath = event.path;
var filePathFromSrc = path.relative(path.resolve("src"), filepath);
// Concatenating the 'build' absolute path used by gulp.dest in the scripts task
var destFilePath = path.resolve("dist", filePathFromSrc);
del.sync(destFilePath);
}
});
});

最终任务

最后,我们需要把这些任务一个个拼起来,最终对外输出两种:devbuild一般就够了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// dev && watch
gulp.task(
"default",
gulp.series(
// sync
gulp.parallel("copy", "img", "less", "tsCompile"),
"watch"
)
);
// build
gulp.task(
"build",
gulp.series( // 串行任务
// sync
"clear",
gulp.parallel( // 并行任务
// async
"copy",
"img",
"less",
"tsCompile"
)
)
);

项目目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
├─dist //编译之后的项目文件(带 sorcemap,支持生产环境告警定位)
├─src //开发目录
│ │ app.ts //小程序起始文件
│ │ app.json
│ │ app.less
│ │
│ ├─assets //静态资源
│ ├─less //公共less
│ ├─img //图片资源
│ ├─components //组件
│ ├─utils //工具库
│ ├─config //配置文档
│ ├─pages //小程序相关页面
│ project.config.json //小程序配置文件
│ gulpfile.js //工具配置
│ package.json //项目配置
│ README.md //项目说明
│ tsconfig.json //typescript配置
│ tslint.json //代码风格配置

最终效果,可以参考wxapp-typescript-demo

结束语


其实小程序也有人出了框架,像 mpvue 和 wepy,开发风格类似 Vue。
不过个人的想法不一样,小程序开发和浏览器开发不一样,小程序官方的 API 会一直不停地进化和完善。如果再使用二次封装的框架,框架是否能跟上小程序 API 的更新节奏,二次封装带来更多的学习成本,这些都需要考虑的。或许有一天,框架的能力优势,最终会被小程序自身取代呢。
而简单的构建任务,却可以很棒地使用到 ES6/ES7、Less、Typescript 这些好用的语法和工具呢。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. gulp 构建小程序
    1. 1.1. 简单的 copy
    2. 1.2. 文件编译
    3. 1.3. watch 任务
    4. 1.4. 最终任务
    5. 1.5. 项目目录结构
  2. 2. 结束语