首先感謝:冰星寒水 - 微信小程序——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.task 移除了三參數(shù)語(yǔ)法,現(xiàn)在不能使用數(shù)組來指定一個(gè)任務(wù)的依賴。gulp 4.0 加入了 gulp.series 和 gulp.parallel 來實(shí)現(xiàn)任務(wù)的串行化和并行化。
- 任務(wù)函數(shù)中,如果任務(wù)是同步的,需要使用 done 回調(diào)。這樣做是為了讓 gulp 知道你的任務(wù)何時(shí)完成。
- 如果任務(wù)是異步的,有多個(gè)方法可以標(biāo)記任務(wù)完成:1. 回調(diào),2. 返回流(Stream),3. 返回 Promise,4. 返回子進(jìn)程。
- 將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