By
被删
更新日期:
虽然 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"];
gulp.task("tsCompile", function() { return tsProject .src(tsPath) .pipe(sourcemaps.init()) .pipe(tsProject()) .js.pipe(sourcemaps.write()) .pipe(gulp.dest("dist")); });
|
当然,用到 typescript 的话,也记得把tsconfig.json
和tslint.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")); var watcher = gulp.watch(copyPath, gulp.series("copyChange")); gulp.watch(watchLessPath, gulp.series("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); var destFilePath = path.resolve("dist", filePathFromSrc); del.sync(destFilePath); } }); });
|
最终任务
最后,我们需要把这些任务一个个拼起来,最终对外输出两种:dev
和build
一般就够了:
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
| gulp.task( "default", gulp.series( gulp.parallel("copy", "img", "less", "tsCompile"), "watch" ) );
gulp.task( "build", gulp.series( "clear", gulp.parallel( "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
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢