因为是连续写的2篇随笔,废话不多说。直接进入正题。

选择预编译的工具时,笔者采用了gulp。虽然,如今市面上大多采用的多为webpack,使用gulp也是有自己的缘由的。

webpack的最主要特点是可以将项目大多数资源打包为单个Js。h5项目中,打包后可以减少文件的请求数量,而小程序是由微信侧控制,并且依赖目录结构的项目,webpack只能进行配置,分入口打包,最终生成的目录结构还是必须符合小程序的项目结构。

gulp同样可以达到预编译的需求,而且配置相对简单。所以就采用了gulp。

大部分的配置需求,都可以百度到。这里就挑一点关键点做一下讨论吧。

  1. 背景图的 base64 转换。这个问题可以使用gulp-base64插件,简单处理掉。但是,背景图和正常使用的 image 图片在相同文件夹下,会同样被打包到dist 目录中。造成冗余,我采用的处理方法是,将背景图和 image 使用的本地图片分开存放,打包时,排除掉背景图的文件夹,仅被打包成base64 存入wxss文件。  all.concat(['!src/assets/bgImages/**'])
  2. 实时编译。可能大家第一印象,感觉简单的使用 gulp.watch 直接跑一次相应的任务就好了。但是,简单的这样配置会造成一个性能的问题。每个改动,编译大量文件。每个文件被修改都会触发小程序开发者工具的刷新。就会造成每次保存,都要等很久才会编译成功,看到页面效果。大大的减低编程效率。所以,在 gulp.watch 任务的中,加入了一个回调。
    function watchHandle (cb) {
    return e => {
    const newPath = changePath(e.path)
    if (e.type === 'deleted') {
    let distFile = './dist/' + Path.relative('./src', newPath);
    fs.existsSync(distFile) && fs.unlinkSync(distFile)
    } else {
    cb(newPath)()
    }
    console.log('File ' + e.path + ' was ' + e.type + ', running tasks...')
    }
    } gulp.watch(jsList, watchHandle(js))

    watchHandle ,就是接收到修改过的文件,然后将文件传入回调,进行处理的中间方法。
    其中,js 是针对 js 文件的预编译处理的回调方法。之后再讨论。

  3. 依照 process.env.NODE_ENV 做不同的配置。例如,开发与生产环境的域名请求。跳转到其他小程序的对应版本。
    采用的方法是,增加 config 目录,存放多个环境的配置文件。在打包时,依照 env 将对应的文件打包到 dist 目录下,并改为 index.js。再app.js 中直接引用,就可以直接取到对应环境的配置。

目前,感觉值得一提的也就只有上面3点。如之前所说,大部分的预编译配置,都是可以百度、谷歌找到,也比我来讲述的更加细致、全面。

完整的包,目前准备在随笔整理完之后,处理掉公司相关的内容,再上传到github开源。如果有需要,可能提前传部分配置。还是要先看各位看官的需要吧。

至于下一篇,就有空的时候再来发吧。应该会写按钮的封装,因为,路由有点问题还在解决中,完成了再来讨论与开源。

下次再见。。

spa 小程序的研发随笔 (2) --- 预编译的更多相关文章

  1. spa 小程序的研发随笔 (1) --- 前言

    半年前跳槽, 新公司主要研发倾向于小程序的开发.由于之前并没有接触小程序,所以经过半年的实际开发,才敢来做一点笔记. 小程序提供很多组件给开发者使用,但是,实际使用中还是会有很多的问题. 小程序的组件 ...

  2. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  3. 微信小程序--背景图片手机无法预览

    目前小程序好像没有支持手机预览背景本地图片,所以将本地图片改为网络图片链接就可以了 background: url("https://..../img/no.png") no-re ...

  4. (干货)微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  5. 微信小程序 - 分包加载(预下载)

    开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度.对于独立分包,也可以预下载主包. 配置方法 预下载分包行为在进入某个页面时触发,通过在 a ...

  6. 微信小程序实战篇-图片的预览、二维码的识别

    开篇 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码,各种翻阅查找,采坑很多,浪费了很多时间,在这里记录下需要注意的点,以及对小程序官方提供的API做一个正确和清晰的认知,希 ...

  7. 微信小程序开发之真机预览

    1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...

  8. 微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  9. 微信小程序之base64图片如何预览与一键保存到本地相册?

    需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...

随机推荐

  1. sql server 2008 r2安装

    选择功能(好像报错了-下次重装系统测试)

  2. PAT 1071【STL string应用】

    1.单case很多清空没必要的 2.string+ char 最好用pushback 3.string +string就直接+ #include <bits/stdc++.h> using ...

  3. Cef3 学习资料

    fanfeilong/cefutil CEF General Usage(CEF3预览) CEF General Usage(CEF3预览) 介绍 CEF全称Chromium Embedded Fra ...

  4. dorado开发模式下实现动态查询

    使用dorado开发模式,我们可以实现以下开发技巧 开发技巧1.实现动态查询功能: 1. 查询按钮的onClick事件中写入: datasetEmployee.parameters().setValu ...

  5. CPU死锁

    https://blog.csdn.net/sunny05296/article/details/82858071 最近碰到了Centos7.2上终端打印soft lockup CPU死锁,系统无响应 ...

  6. thinkphp5.1 使用第三方扩展类库

    此案例介绍的不是通过composer加载的,是手工下载放入extend目录下的扩展类库,仍然以phpspider为例 将owner888目录放入extend目录下,也可以直接将phpspider目录放 ...

  7. angular中[hidden]="expression"注意事项

    [hidden]="expression",右侧的表达式尽量使用布尔值:虽然比较运算符也可以达到效果,但时常会出现一些莫名其妙的错误.

  8. P2161 [SHOI2009]会场预约 (线段树:线段树上的不重复覆盖数)

    题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一个 ...

  9. 解决spark-shell输出日志信息过多

    import org.apache.log4j.Logger import org.apache.log4j.Level Logger.getLogger("org").setLe ...

  10. (转)linux自定义开机启动服务和chkconfig使用方法

    原文:https://www.cnblogs.com/jimeper/archive/2013/03/12/2955687.html linux自定义开机启动服务和chkconfig使用方法 1. 服 ...