小程式程式碼打包處理

首先感謝：冰星寒水 - 微信小程式——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