关于前端:使用gulp让小程序开发更顺滑

背景

公司有几个小程序我的项目，应用的原生形式开发。原生形式有它本人的益处，比方不必踩框架的坑了，但弊病也很显著，无奈应用框架带来的效率的晋升。基于此，就简略的应用 gulp，配置了一套工作流，帮咱们在开发过程中省去一些反复的操作。

为什么应用 gulp 而没有用 webpack？在对这两个工具都实际了一番后，发现针对咱们的问题，应用 gulp 更简略。。。

对于 gulp 本文不会做过多的介绍，侧重点在于性能的实现。

性能列表

• 反对应用 less 书写 css
• css 主动补全
• js 语法反对
• css 和 js 代码压缩
• 图片主动上传到 cdn，监听到图片变动后，主动上传 cdn
• 反对动态资源目录，例如 di 三方 JS、须要放到本地的图片
• 小程序原生 npm 性能，通过命令主动构建小程序实用的 npm 包
• 单位默认转换，即 px 主动转为 rpx，同时反对不同端屏幕的适配
• 反对 source map，可能定位构建后的代码是在哪里出错的
• 通过命令创立 page 和 component，主动生成四个文件
• 反对环境变量，通过命令主动生成不同环境的代码
• 引入 miniprogram-ci，通过上传代码到微信后盾

目录构造

先看下配置好后的目录构造，其中 src 目录内容就是微信小程序的代码，内部的都是一些配置文件。

命令定义

上面是在 package.json 中定义的命令，接下来会一个个实现这些性能。

"scripts": {
    "start": "rm -rf ./dist && cross-env NODE_ENV=development gulp",
    "preview": "gulp preview",
    "build-pro": "rm -rf ./dist && cross-env NODE_ENV=production gulp build",
    "build-dev": "rm -rf ./dist && cross-env NODE_ENV=development gulp build",
    "build-npm": "gulp npm",
    "deploy-dev": "npm run build-dev && gulp upload",
    "deploy-pro": "npm run build-pro && gulp upload",
    "cp": "create-wxapp-page --type=page --dir=src --indent=2 --style=less",
    "cc": "create-wxapp-page --type=component --dir=src --indent=2 --style=less"
  },

gulpfile

gulpfile 文件是所有的配置代码，前面会对每个 task 做具体解释。

const path = require('path');
const fileExists = require('file-exists');
const gulp = require('gulp');
const less = require('gulp-less');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const del = require('del');
const qcloud = require('qcloud-upload');
const gulpif = require('gulp-if');
const gutil = require('gulp-util');
const replace = require('gulp-replace');
const px2rpx = require('gulp-px2rpx');
const ci = require('miniprogram-ci');
const sourcemaps = require('gulp-sourcemaps');
 
const alias = require('gulp-path-alias');
const pkg = require('./package.json')
const projectConfig = require('./project.config.json')
 
const buildPath = path.join(__dirname, 'dist/')
 
const uploadFolder = path.join(__dirname, './src/images')
 
const isPro = process.env.NODE_ENV === 'production'
 
const config = {
// 腾讯 CDN 油漆桶配置
  assetsCDN: 'https://xxx.cos.ap-guangzhou.myqcloud.com/',
  cos: {
    Bucket: 'xxx',
    Region: 'xxx',
    SecretId: 'xxx',
    SecretKey: 'xxx',
    prefix: `${pkg.name}/images`, // 上传到油漆桶的哪个文件夹
    src: uploadFolder, // 上传哪个文件夹到油漆桶
    overWrite: 1,
  },
  enablePx2Rpx: true,
  enableCleanCSS: false,
  enableAuto: true, // 主动补全 css
  enableUglify: false,
  enableSourcemap: true,
};
 
 
const paths = {
  styles: {src: ['src/**/*.less'],
    dest: buildPath
  },
  images: {src: 'src/images/**/*.{png,jpg,jpeg,svg,gif}',
    dest: buildPath
  },
  scripts: {
    src: 'src/**/*.js',
    dest: buildPath
  },
  copy: {src: ['src/**', '!src/**/*.less', '!src/images/**', '!src/**/*.js', 'package.json'],
    dest: buildPath
  },
}
 
 
// 删除构建
function clean() {return del([buildPath])
}
 
function log() {const data = Array.prototype.slice.call(arguments)
  gutil.log.apply(false, data)
}
 
function upload() {return new Promise(function (resolve, reject) {// 一般函数，resolve() 的时候，qcloud 不肯定执行完结
    qcloud(config.cos)
    resolve()})
}
 
 
// 工作处理函数
function styles() {
  return gulp
    .src(paths.styles.src, { base: 'src'})
    .pipe(alias({
      paths: {'@': path.resolve(__dirname, './src/'),
      }
    }))
    .pipe(less())
    .pipe(replace('%CDN_IMG%/', config.assetsCDN + config.cos.prefix + '/'))
    .pipe(gulpif(config.enableCleanCSS, cleanCSS()))
    .pipe(gulpif(config.enablePx2Rpx, px2rpx({
      screenWidth: 375, // 设计稿屏幕, 默认 750
      wxappScreenWidth: 750, // 微信小程序屏幕, 默认 750
      remPrecision: 6
    })))
    .pipe(replace('PX', 'px'))
    .pipe(rename(path => (path.extname = '.wxss')))
    .pipe(gulp.dest(paths.styles.dest))
}
 
function scripts() {
  return gulp
    .src(paths.scripts.src, { base: 'src'})
    .pipe(alias({
      paths: {'@': path.resolve(__dirname, './src/'), // src 目录
      }
    }))
    .pipe(gulpif(config.enableSourcemap, sourcemaps.init()))
    .pipe(gulpif(isPro, replace('%ENV%', 'production'), replace('%ENV%', 'development'))) // 环境变量动态替换
    .pipe(replace('%CDN_IMG%/', config.assetsCDN + config.cos.prefix + '/'))
    .pipe(replace('%VERSION%', pkg.version))
    .pipe(gulpif(config.enableUglify, uglify()))
    .pipe(gulpif(config.enableSourcemap, sourcemaps.write('.')))
    .pipe(gulp.dest(paths.scripts.dest))
}
 
// 不须要解决的文件间接复制过来
function copy() {
  return gulp
    .src(paths.copy.src)
    .pipe(replace('%CDN_IMG%/', config.assetsCDN + config.cos.prefix + '/'))
    .pipe(gulp.dest(paths.copy.dest))
}
 
function watchFiles() {const w1 = gulp.watch(paths.styles.src, styles).on('unlink', function (file) {log(gutil.colors.yellow(file) + 'is deleted')
    const filePath = file.replace(/src\\/, 'dist\\')
    del([filePath])
  });
 
  const w2 = gulp.watch(paths.scripts.src, scripts).on('unlink', function (file) {log(gutil.colors.yellow(file) + 'is deleted')
    const filePath = file.replace(/src\\/, 'dist\\')
    del([filePath])
  });
 
 
  const w3 = gulp.watch(paths.copy.src, copy).on('unlink', function (file) {log(gutil.colors.yellow(file) + 'is deleted')
    const filePath = file.replace(/src\\/, 'dist\\')
    del([filePath])
  });
 
  const w4 = gulp.watch(paths.images.src, upload).on('unlink', function (file) {log(gutil.colors.yellow(file) + 'is deleted')
    const filePath = file.replace(/src\\/, 'tmp\\')
    del([filePath])
  });
  return Promise.all([w1, w2, w3, w4])
}
 
/**
 * 小程序 ci 相干函数
 */
let project = {}
 
const keyFile = fileExists.sync(`./private.${projectConfig.appid}.key`)
if (keyFile) {
  project = new ci.Project({
    appid: projectConfig.appid,
    type: 'miniProgram',
    projectPath: './dist',
    privateKeyPath: `./private.${projectConfig.appid}.key`,
    ignores: [],})
}
async function npmBuild() {
  await ci.packNpmManually({
    packageJsonPath: './package.json',
    miniprogramNpmDistDir: './src/',
  })
}
 
async function mpUpload() {
 
  const uploadResult = await ci.upload({
    project,
    version: pkg.version,
    desc: pkg.description,
    setting: {
      es6: true,
      minify: true,
      autoPrefixWXSS: true,
    },
    onProgressUpdate: console.log,
  })
  console.log('[uploadResult:]', uploadResult)
}
 
async function preview() {
  const previewResult = await ci.preview({
    project,
    desc: pkg.description, // 此备注将显示在“小程序助手”开发版列表中
    qrcodeFormat: 'image',
    qrcodeOutputDest: './preview.jpg',
    onProgressUpdate: console.log,
  })
  console.log('[previewResult:]', previewResult)
}
exports.watch = watchFiles
exports.preview = preview
// ci 主动构建 npm
exports.npm = npmBuild
exports.upload = mpUpload
 
exports.default = gulp.series(styles, scripts, copy, upload, watchFiles)
 
exports.build = gulp.series(clean, styles, scripts, copy, upload)

主动创立组件和页面

主动创立组件和页面应用了一个 npm 包，叫做 create-wxapp-page，有了它就能在命令行间接创立一组文件了。

npm run cc # 而后输出组件名字 
npm run cp # 而后输出页面名字 

主动构建 npm

小程序是反对 npm 的，然而须要在开发者工具开启后，手动点击编译，能力生成对应的 npm 包。还好微信提供了 miniprogram-ci 包，能够省去手动的过程。

const ci = require('miniprogram-ci');
 
async function npmBuild() {
  await ci.packNpmManually({
    packageJsonPath: './package.json',
    miniprogramNpmDistDir: './src/',
  })
}
 
exports.npm = npmBuild

执行 npm run build-npm，咱们装置的包就会构建到 src 的 miniprogram_npm 目录下。

环境变量反对

环境变量能够帮咱们辨别不同环境的要执行的代码，比方 API 地址。实现形式是动态替换。

pipe(gulpif(isPro, replace('%ENV%', 'production'), replace('%ENV%', 'development'))

const isPro = '%ENV%' === 'production'
 
if (isPro) {// 生产环境} else {// 测试，体验环境}

图片上传到 CDN

当监听到 images 文件夹中有图片变更，会执行上传操作。

function upload() {return new Promise(function (resolve, reject) {// 一般函数，resolve() 的时候，qcloud 不肯定执行完结。qcloud 没有提供上传胜利的 callback
    qcloud(config.cos)
    resolve()})
}

应用 CND 图片

<image src="%CDN_IMG%/index/empty" mode="aspectFit" class="empty__img" />

sourcemap

sourcemap 也很简略，同样是一个包，gulp-sourcemap

.pipe(gulpif(config.enableSourcemap, sourcemaps.init())

动态目录

对于一些非凡的动态资源，比方 tabbar 的 icon 图片，能够放到 src/static 目录下，这个目录的文件会原样 copy 到 dist 目录。

js 语法反对

js 新语法倡议应用小程序工具自带的“es6 转 es5”和“加强编译”，实际发现应用 glup-babel 会导致 js 编译太慢。工具自带的曾经够用了。

应用 CI 上传代码

miniprogram-ci 提供了上传代码到小程序管理后盾。第一步是先下载密钥，而后把文件命命名为 private.{appId}.key，最初搁置到我的项目根目录。处于平安思考，更好的做法到是把 ci 性能放到服务器端，这里就先放到前端了。

执行 npm run deploy-dev 就能够把代码上传到体验版了，最初体验版选为 ci 机器人。

project.config.json 变更

{
   "description": "我的项目配置文件",
  "miniprogramRoot": "dist/",
  "packOptions": {
    "ignore": [
      {
        "type": "folder",
        "value": "images"
      }
    ]
  }
  }

dist 这个目录是构建进去的小程序代码，因而要指定 miniprogramRoot 为“dist/”

因为图片上传到 cdn 了，src/images 文件夹就没有必要打包进小程序了，这样也缩小了体积。

### 结语

其实 glupfile 文件的代码比较简单，解释的太多感觉有点多余了。以上配置在我司的已上线小程序上安稳运行，革新老本也很低。如果有小伙伴想在自家小程序上应用，遇到任何问题欢送留言。

以上，感激浏览！