小程序代碼打包處理

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

前言

因?yàn)轫?xiàng)目原因，談一下老生常談的問題，前端雖然沒有代理處理雖然是防君子不防小人局面，不過把es6以后的代碼babel一下到es5，我發(fā)現(xiàn)我自己都難“李德順”了。babel轉(zhuǎn)js后，把所有的文件分別壓縮一下，得到一份新的小程序代碼。比較初級(jí)的做法，給自己留下個(gè)備忘錄，大神勿噴。。。

方式

之前有幸在項(xiàng)目使用了gulp，一直有一個(gè)用gulp構(gòu)建小程序的想法，今天趁此機(jī)會(huì)剛好實(shí)踐一把。通過gulp實(shí)現(xiàn)代碼處理，如下是必須的配置文件，放在小程序根目錄下，然后將小程序的所有文件移至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'], () => {
  // 順序執(zhí)行
  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插件做轉(zhuǎn)換，gulp的目的就是發(fā)布。如果需要實(shí)時(shí)調(diào)試可啟用watch
  • 建議關(guān)閉微信的es6轉(zhuǎn)es5，代碼壓縮

備注

  • gulp 4.0 任務(wù)執(zhí)行有變動(dòng)，有同步和異步處理

更新 - 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 升級(jí)指南

  1. gulp.task 移除了三參數(shù)語(yǔ)法，現(xiàn)在不能使用數(shù)組來指定一個(gè)任務(wù)的依賴。gulp 4.0 加入了 gulp.series 和 gulp.parallel 來實(shí)現(xiàn)任務(wù)的串行化和并行化。
  2. 任務(wù)函數(shù)中，如果任務(wù)是同步的，需要使用 done 回調(diào)。這樣做是為了讓 gulp 知道你的任務(wù)何時(shí)完成。
  3. 如果任務(wù)是異步的，有多個(gè)方法可以標(biāo)記任務(wù)完成：1. 回調(diào)，2. 返回流（Stream），3. 返回 Promise，4. 返回子進(jìn)程。
  4. 將task通過 js 函數(shù)的提升特性，可以將一些task定義為函數(shù)，好處就是私有化，不過就不再是gulp的命令，需要通過主task來啟動(dòng)
  • 若需要同步任務(wù)，想避免顯式調(diào)用done方法，可以將任務(wù)添加到串行隊(duì)列執(zhí)行，任務(wù)提供異步返回，保持和gulp3 一致就行。

神坑

  • 小程序組件間傳值和事件，不要使用大駝峰，通過gulp-htmlmin壓縮wxml代碼時(shí)，pages內(nèi)的頁(yè)面會(huì)被轉(zhuǎn)為全小寫
    • js大小寫是敏感的，html大小寫是不敏感的，因此屬性和事件的傳遞建議使用小寫
    • 不使用gulp-htmlmin代碼壓縮wxml文件
  • 小程序border為1rpx時(shí)提供gulp-minify-css壓縮后，1rpx就變成了0，因此需要使用1px作為border的寬度

2018.11.29 malk

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 在現(xiàn)在的前端開發(fā)中，前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,483評(píng)論 1贊 32
  • 安裝Gulp首先需要安裝Node.js，并在控制臺(tái)輸入$ npm install gulp -gMac端需要寫成$...
    LaBaby_閱讀 947評(píng)論 0贊 1
  • 1 Webpack 1.1 概念簡(jiǎn)介 1.1.1 WebPack是什么 1、一個(gè)打包工具 2、一個(gè)模塊加載工具 3...
    Kevin_Junbaozi閱讀 6,714評(píng)論 0贊 16
  • 參照Gulp for Beginners來學(xué)習(xí)Gulp基本內(nèi)容。以下為學(xué)習(xí)記錄筆記。 安裝Gulp 首先需要安裝N...
    JenniferYe閱讀 2,563評(píng)論 1贊 17
  • 連綿秋雨，寒氣一層接一層的重了起來，白露秋分，白日的時(shí)間也越來越短，下自習(xí)，已經(jīng)暮色四合。 帶了孩子匆匆往回趕，想...
    素衣煙霞閱讀 421評(píng)論 0贊 2