小程序代码打包处理

首先感谢：冰星寒水 - 微信小程序——gulp处理文件 文章

前言

因为项目原因，谈一下老生常谈的问题，前端虽然没有代理处理虽然是防君子不防小人局面，不过把es6以后的代码babel一下到es5，我发现我自己都难“李德顺”了。babel转js后，把所有的文件分别压缩一下，得到一份新的小程序代码。比较初级的做法，给自己留下个备忘录，大神勿喷。。。

方式

之前有幸在项目使用了gulp，一直有一个用gulp构建小程序的想法，今天趁此机会刚好实践一把。通过gulp实现代码处理，如下是必须的配置文件，放在小程序根目录下，然后将小程序的所有文件移至src下

  • gulpfile.js -- 使用了插件功能，支持gulp开头的插件
const gulp = require('gulp')

const SRC_DIR = './src/**/*'
const DIST_DIR = './dist/'

// Load plugins
const $ = require('gulp-load-plugins')()

// watch
gulp.task('watch', () => {
  gulp.watch(SRC_DIR + '.js', ['jsmin'])
  gulp.watch(SRC_DIR + '.json', ['jsonmin'])
  gulp.watch('./src/assets/**', ['assets'])
  gulp.watch(SRC_DIR + '.wxml', ['wxmlmin'])
  gulp.watch(SRC_DIR + '.wxss', ['wxssmin'])
})

// js
gulp.task('jsmin', () => {
  return gulp
    .src(SRC_DIR + '.js')
    .pipe(
      $.babel({
        presets: ['es2015']
      })
    )
    .pipe(
      $.uglify({
        compress: true
      })
    )
    .pipe(gulp.dest(DIST_DIR))
})

// json
gulp.task('jsonmin', () => {
  return gulp
    .src(SRC_DIR + '.json')
    .pipe($.jsonminify2())
    .pipe(gulp.dest(DIST_DIR))
})

// assets
gulp.task('assets', () => {
  return gulp.src('./src/assets/**').pipe(gulp.dest('./dist/assets'))
})

// wxml
gulp.task('wxmlmin', () => {
  return gulp
    .src(SRC_DIR + '.wxml')
    .pipe(
      $.htmlmin({
        collapseWhitespace: true,
        removeComments: true,
        keepClosingSlash: true
      })
    )
    .pipe(gulp.dest(DIST_DIR))
})

// wxss
gulp.task('wxssmin', () => {
    return gulp.src(SRC_DIR + '.wxss')
    .pipe($.autoprefixer(['iOS >= 8', 'Android >= 4.1']))
    .pipe($.rename(path => (path.extname = '.wxss')))
    .pipe($.minifyCss())
    .pipe(gulp.dest(DIST_DIR))
})

// build
gulp.task('build', [
  'jsmin',
  'jsonmin',
  'assets',
  'wxmlmin',
  'wxssmin'
]);

// no console
gulp.task("nodebug", () => {
  return gulp
    .src('./dist/**/*.js')
    .pipe($.stripDebug())
    .pipe(gulp.dest(DIST_DIR))
})

// publish - 不是gulp插件
const runSequence = require('run-sequence')
gulp.task('product', ['clean'], () => {
  // 顺序执行
  runSequence('build', 'nodebug');
})

// clean - 不是gulp插件
const del = require('del')
gulp.task('clean', () => {
  return del([DIST_DIR + '**'])
})
  • .babelrc -- 需要配置，不然async/await不能babel
{
  "plugins": [
      "transform-strict-mode",
      "transform-es2015-modules-commonjs",
      "transform-es2015-spread",
      "transform-es2015-destructuring",
      "transform-es2015-parameters"
  ],
  "presets": [
      "es2015",
      "stage-0"
  ]
}
  • package.json -- node依赖，使用npm下载
{
  "repository": {
    "type": "",
    "url": ""
  },
  "description": "deal applet codo by gulp",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^6.6.0",
    "babel-eslint": "^7.1.1",
    "babel-preset-latest": "^6.16.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-eslint": "^3.0.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-jsonlint": "^1.2.0",
    "gulp-jsonminify2": "^1.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-postcss": "^6.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-strip-debug": "^3.0.0",
    "gulp-uglify": "^2.0.0",
    "run-sequence": "^1.2.2"
  },
  "devDependencies": {
    "babel-preset-stage-0": "^6.24.1",
    "gulp-load-plugins": "^1.5.0"
  }
}


说明

  • 流程详见 gulpfile.js 注释
  • 如果用到了less或者sass，可以配置watch，目前我是通过vscode的Easy WXLess插件做转换，gulp的目的就是发布。如果需要实时调试可启用watch
  • 建议关闭微信的es6转es5，代码压缩

备注

  • gulp 4.0 任务执行有变动，有同步和异步处理

更新 - gulp 4.0 方案

  • 更新 package.json -- 去掉 run-sequence 同步处理，4.0已自带
{
  "repository": {
    "type": "",
    "url": ""
  },
  "description": "deal applet codo by gulp",
  "license": "ISC",
  "dependencies": {
    "gulp": "^4.0.0",
    "autoprefixer": "^6.6.0",
    "babel-eslint": "^7.1.1",
    "babel-preset-latest": "^6.16.0",
    "del": "^2.2.2",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-eslint": "^3.0.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-jsonlint": "^1.2.0",
    "gulp-jsonminify2": "^1.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-postcss": "^6.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-strip-debug": "^3.0.0",
    "gulp-uglify": "^2.0.0"
  },
  "devDependencies": {
    "babel-preset-stage-0": "^6.24.1",
    "gulp-load-plugins": "^1.5.0"
  }
}
  • 更新 gulpfile.js -- bulid 命令是异步的；product命令是同步的，先删除，再build，最后去掉打印
const gulp = require('gulp')

const SRC_DIR = './src/**/*'
const DIST_DIR = './dist/'

// Load plugins
const $ = require('gulp-load-plugins')()

// watch
gulp.task('watch', () => {
  gulp.watch(SRC_DIR + '.js', ['jsmin'])
  gulp.watch(SRC_DIR + '.json', ['jsonmin'])
  gulp.watch('./src/assets/**', ['assets'])
  gulp.watch(SRC_DIR + '.wxml', ['wxmlmin'])
  gulp.watch(SRC_DIR + '.wxss', ['wxssmin'])
})

// js
function jsmin() {
  return gulp
    .src(SRC_DIR + '.js')
    .pipe(
      $.babel({
        presets: ['es2015']
      })
    )
    .pipe(
      $.uglify({
        compress: true
      })
    )
    .pipe(gulp.dest(DIST_DIR))
}

// json
function jsonmin() {
  return gulp
    .src(SRC_DIR + '.json')
    .pipe($.jsonminify2())
    .pipe(gulp.dest(DIST_DIR))
}

// assets
function assets() {
  return gulp.src('./src/assets/**').pipe(gulp.dest('./dist/assets'))
}

// wxml
function wxmlmin() {
  return gulp
    .src(SRC_DIR + '.wxml')
    .pipe(
      $.htmlmin({
        collapseWhitespace: true,
        removeComments: true,
        keepClosingSlash: true
      })
    )
    .pipe(gulp.dest(DIST_DIR))
}

// wxss
function wxssmin() {
  return gulp
    .src(SRC_DIR + '.wxss')
    .pipe($.autoprefixer(['iOS >= 8', 'Android >= 4.1']))
    .pipe($.rename(path => (path.extname = '.wxss')))
    .pipe($.minifyCss())
    .pipe(gulp.dest(DIST_DIR))
}

// no console
function nodebug () {
  return gulp
    .src('./dist/**/*.js')
    .pipe($.stripDebug())
    .pipe(gulp.dest(DIST_DIR))
}

// build
gulp.task(
  'build',
  gulp.parallel(jsmin, jsonmin, assets, wxmlmin, wxssmin)
)

// publish
gulp.task('product', gulp.series(clean, "build", nodebug))

// clean - 不是gulp插件
const del = require('del')
function clean() {
  return del([DIST_DIR + '**'])
}

感谢：苏星河 - gulp 4.0 升级指南

  1. gulp.task 移除了三参数语法，现在不能使用数组来指定一个任务的依赖。gulp 4.0 加入了 gulp.series 和 gulp.parallel 来实现任务的串行化和并行化。
  2. 任务函数中，如果任务是同步的，需要使用 done 回调。这样做是为了让 gulp 知道你的任务何时完成。
  3. 如果任务是异步的，有多个方法可以标记任务完成：1. 回调，2. 返回流（Stream），3. 返回 Promise，4. 返回子进程。
  4. 将task通过 js 函数的提升特性，可以将一些task定义为函数，好处就是私有化，不过就不再是gulp的命令，需要通过主task来启动
  • 若需要同步任务，想避免显式调用done方法，可以将任务添加到串行队列执行，任务提供异步返回，保持和gulp3 一致就行。

神坑

  • 小程序组件间传值和事件，不要使用大驼峰，通过gulp-htmlmin压缩wxml代码时，pages内的页面会被转为全小写
    • js大小写是敏感的，html大小写是不敏感的，因此属性和事件的传递建议使用小写
    • 不使用gulp-htmlmin代码压缩wxml文件
  • 小程序border为1rpx时提供gulp-minify-css压缩后，1rpx就变成了0，因此需要使用1px作为border的宽度

2018.11.29 malk

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Gulp和Webpack的差异
    在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,504评论 1赞 32
  • gulp
    安装Gulp首先需要安装Node.js，并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 959评论 0赞 1
  • 【Hybrid开发高级系列】WebPack模块化专题
    1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,744评论 0赞 16
  • Gulp学习
    参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,576评论 1赞 17
  • 2018-09-17
    连绵秋雨，寒气一层接一层的重了起来，白露秋分，白日的时间也越来越短，下自习，已经暮色四合。 带了孩子匆匆往回赶，想...
    素衣烟霞阅读 422评论 0赞 2