虽然 webpack 用的比较多,不过在小程序这种场景下,简单的 gulp 也是个不错的选择~
” gulp构建小程序1. 简单的 copy
对小程序来说,除了app.js作为程序入口之外,每个page页面都可以作为一个页面入口,更倾向是固定路径模式的多页应用。
最终提交的代码,便是这种结构的代码:
├── app.js├── app.json├── app.wxss├── pages│ │── index│ │ ├── index.wxml│ │ ├── index.js│ │ ├── index.json│ │ └── index.wxss│ └── logs│ ├── logs.wxml│ └── logs.js
所以,在编译的过程,很多文件都是需要简单地 copy 到目标目录的。我们定义复制和变动复制的任务:
// 待复制的文件,不包含需要编译的文件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));});
2. 文件编译
我们想要用高级语法,想要写async/await,想要用less来写样式,想要用typescript来写代码,则需要针对每种文件做编译。
这里用ts来举例:
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.json和tslint.json加上哇。
3. watch 任务
在我们写代码的时候,就需要监听文件变动并自动复制、编译和更新,这时候我们就需要 watch 任务:
//监听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); } });});
4. 最终任务
最后,我们需要把这些任务一个个拼起来,最终对外输出两种:dev和build一般就够了:
// dev && watchgulp.task( "default", gulp.series( // sync gulp.parallel("copy", "img", "less", "tsCompile"), "watch" ));// buildgulp.task( "build", gulp.series( // 串行任务 // sync "clear", gulp.parallel( // 并行任务 // async "copy", "img", "less", "tsCompile" ) ));
5. 项目目录结构
├─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 //代码风格配置
-结束语-
其实小程序也有人出了框架,像 mpvue 和 wepy,开发风格类似 Vue。不过个人的想法不一样,小程序开发和浏览器开发不一样,小程序官方的 API 会一直不停地进化和完善。
如果再使用二次封装的框架,框架是否能跟上小程序 API 的更新节奏,二次封装带来更多的学习成本,这些都需要考虑的。
或许有一天,框架的能力优势,最终会被小程序自身取代呢。
文章来源:腾讯工程师 王贝珊
-温馨提醒-
第一波「优秀奖学金」申请将于明晚9点截止
项目通过审核且评分满足获奖的童靴
即可获得最高3万元奖学金噢~
机会难得!!错过这期就要再等几个月啦
还没来得及报名的同学快戳我们下方的报名吧
「人人都会微信小程序实战进阶」限时特惠
上线自己的小程序,抢领百万奖学金
微信官方证书召唤你,腾讯offer等你拿
腾讯大牛手把手教学,0基础快速上手小程序
腾讯NEXT学院
求职干货 | 前辈blog | 前端课程
↓ 戳