spa 小程序的研发随笔 (2) --- 预编译

因为是连续写的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 任务的中,加入了一个回调。
    spa 小程序的研发随笔 (2) --- 预编译
    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))
    View Code

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

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

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

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

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

下次再见。。

 

spa 小程序的研发随笔 (2) --- 预编译

上一篇:微信分享大图遇到的问题(Android)


下一篇:spa 小程序的研发随笔 (1) --- 前言