web開發(fā)基本上都是基于webpack或者其他的構建工具來進行開發(fā),大大節(jié)約了開發(fā)者的時間。目前的微信小程序開發(fā)也有很多開源的框架可供選擇,但是如果使用原生開發(fā)模式,雖然可以完美使用小程序原生的新特性和功能,但是工作流角度上卻十分簡陋。
19年末的時候公司要開發(fā)一個新的小程序,組里面的大佬同事提議使用gulp來構建下原生開發(fā)模式的工作流。一是為了擺脫簡陋的工作流模式以節(jié)約開發(fā)時間,二是也是把技術用到刀刃上。在大佬的指導開發(fā)下,這個工作便進行了??傮w來說這個工作并不難,增益可能也沒有那么大,但是還是收獲了很多。
我們把開發(fā)目錄設置在 src
,輸出目錄設置在 dist
,定義開發(fā)與輸出路徑。
微信小程序的page目錄通常包含 wxml
, json
, wxss
和 js
文件,與原生開發(fā)模式不同的是我們使用 sass
預處理器來寫樣式,其他的文件保持原樣不同。因此,對于 wxml
, json
, js
文件來說,僅僅需要copy就行。因為在項目中已經(jīng)配置了 eslint+prettier
來進行語法檢查和代碼美化,因此不需要在工作流的js代碼進行規(guī)范檢查。如果沒有配置,可以安裝 gulp-eslint
執(zhí)行eslint規(guī)范檢查。
const srcPath = "./src/**";
const distPath = "./dist/";
const wxmlFiles = [`${srcPath}/*.wxml`];
const jsFiles = [`${srcPath}/*.js`, `!${srcPath}/env/*.js`];
const jsonFiles = [`${srcPath}/*.json`];
// copy wxml
const wxml = () => {
return gulp
.src(wxmlFiles, { since: gulp.lastRun(wxml) })
.pipe(gulp.dest(distPath));
};
gulp.task(wxml);
// 其他copy流類似
...
復制代碼
上面我們提到使用 sass
預處理來編寫樣式,在輸出的時候我們需要把 scss
樣式轉換成 wxss
, wxss
就是普通的 css
樣式。這里,我們使用 gulp-sass
插件轉換scss樣式。但是,需要注意的是在 scss
文件中,我們可能會import相關樣式,可能是公共樣式也可能是varibale和minxin。
經(jīng)過測試發(fā)現(xiàn),當import公共樣式,會把這個公共樣式打包進當前頁面。我們知道小程序的包是有大小限制的,如果在引入公共樣式的時候還打包到當前頁面,無疑是消耗掉了不必要的內存。所以,針對公共樣式的import處理為,不交給sass處理,保留import并把后綴的.scss改成.wxss。
當import的是變量和mixin時,我們需要保留對其的sass處理,因此新建獨立的目錄存放以便識別。在這一場景下,變量和mixin的文件不再遞歸處理。
//存放variable和mixin的sass文件在被引用時直接導入,不引入dist目錄中
const DIRECTIMPORT = ["/scss/", "/font/"];
const sassFiles = [`${srcPath}/*.{scss, wxss}`];
const wxss = () => {
return gulp
.src([...sassFiles, ...DIRECTIMPORT.map(item => `!${srcPath}/${item}/*`)], {
since: gulp.lastRun(wxss)
})
.pipe(plumber({ errorHandler: onError }))
.pipe(
tap(file => {
const filePath = path.dirname(file.path);
//console.log("filepath", filePath);
file.contents = new Buffer(
// 匹配@import
String(file.contents).replace(
/@import\s+['|"](.+)['|"];/g,
($1, $2) => {
console.log("$1", $1);
console.log("$2", $2);
//如果不是變量或者mixin則注釋掉
return DIRECTIMPORT.some(item => {
return $2.indexOf(item) > -1;
})
? $1
: `/** ${$1} **/`;
}
)
);
})
)
.pipe(sass())
.pipe(postcss([autoprefixer(["iOS >= 8", "Android >= 4.1"])]))
.pipe(
replace(/(\/\*\*\s{0,})(@.+)(\s{0,}\*\*\/)/g, ($1, $2, $3) => {
//console.log("$1", $1);
//console.log("$2", $2);
//console.log("$3", $3);
//去掉注釋并修改scss后綴為wxss
return $3.replace(/\.scss/g, ".wxss");
})
)
.pipe(rename({ extname: ".wxss" }))
.pipe(gulp.dest(distPath));
};
gulp.task(wxss);
復制代碼
安裝gulp-imagemin插件壓縮圖片。之前通過npm安裝在使用的時候這個插件總是報錯,后來發(fā)現(xiàn)是沒有正確安裝,瞎倒騰切換到cnpm或者yarn發(fā)現(xiàn)可以安裝成功了。
const imageFiles = [
`${srcPath}/images/*.{png,jpg,gif,ico}`,
`${srcPath}/images/**/*.{png,jpg,gif,ico}`
];
const img = () => {
return gulp
.src(imageFiles, { since: gulp.lastRun(img) })
.pipe(imagemin())
.pipe(gulp.dest(distPath));
};
gulp.task(img);
復制代碼
正常開發(fā)過程中,開發(fā),測試和發(fā)布環(huán)境通常會有不同的API接口和其他設置。在每次切換的時候手動去更改內部代碼是一件很麻煩的事情,也容易遺忘,根據(jù)不同的命令自動加載相應的開發(fā)環(huán)境設置才是我們想要的效果。 在 src/env/*
目錄下,配置了三個環(huán)境的變量: dev.js
, test.js
, prod.js
。
const envJs = env => {
return () => {
return gulp
.src(`./src/env/${env}.js`)
.pipe(rename("env.js"))
.pipe(gulp.dest(distPath));
};
};
gulp.task(envJs);
復制代碼
在重新編譯的時候我們都需要清除dist目錄的資源,以免導致混亂
/* 清除dist目錄 */
gulp.task("clean", done => {
del.sync(["dist/**"]);
done();
});
復制代碼
使用命令新建page目錄和component目錄,只要把模版文件拷貝并重命名即可。
const newfile = done => {
yargs
.example("gulp newfile -p mypage", "創(chuàng)建mypage的page目錄")
.example("gulp newfile -c mycomponent", "創(chuàng)建mycomponent的component目錄")
.example(
"gulp newfile -s srcfile -p mypage",
"以srcfile為模版創(chuàng)建mypage的page目錄"
)
.option({
s: {
alias: "src",
describe: "模板",
type: "string",
default: "template"
},
p: {
alias: "page",
describe: "page名稱",
type: "string"
},
c: {
alias: "component",
describe: "component名稱",
type: "string"
}
})
.fail(msg => {
done();
console.error("創(chuàng)建失敗");
console.log(msg);
console.log("help");
yargs.parse(["--msg"]);
})
.help("msg");
const args = yargs.argv;
//console.log("args", args);
const source = args.s;
const filePaths = {
p: "pages",
c: "components"
};
let name,
type,
hasParam = false;
for (let key in filePaths) {
if (args[key]) {
hasParam = true;
name = args[key];
type = filePaths[key];
}
}
if (!hasParam) {
done();
yargs.parse(["--msg"]);
}
const defaultPath =
source === "template"
? `src/${source}/${type}/*`
: `src/${type}/${source}/*`;
return gulp.src(defaultPath).pipe(gulp.dest(`src/${type}/${name}/`));
};
gulp.task(newfile);
復制代碼