项目采用gulp进行构建
目录结构如下:
- src 源码文件
- image 图片源文件
- image/dateuri base64图片(图片地址添加后缀#datauri)
- less less变量文件、公共文件
- pages/功能相关模板
- utils 工具相关文件
- dist 打包文件
- doc 接口文档
- mock 模拟接口数据
安装说明如下:
1、安装脚手架
$ mkdir wx_demo
$ cd jm_wx
$ npm init
2、配置gulpfile和package.json
$ npm install
$ npm i gulp -g
3、开发模式
npm run dev
4、构建模式
npm run build
5、清理生成目录下的文件
npm run clean
gulpfile.js文件
const gulp = require('gulp')
const watch = require('gulp-watch')
const imagemin = require('gulp-imagemin')
const del = require('del')
const base64 = require('gulp-base64')
const rename = require('gulp-rename')
const jshint = require('gulp-jshint')
const less = require('gulp-less')
const plumber = require('gulp-plumber')
const ifElse = require('gulp-if-else')
const nodemon = require('gulp-nodemon')
let isBuild = false
const colorStyle = {
'blue': ['\x1B[34m', '\x1B[39m'],
'green': ['\x1B[32m', '\x1B[39m']
};
const srcDir = {
js: './src/**/*.js',
views: './src/**/*.{html,wxml}',
wxss: './src/**/*.wxss',
json: './src/**/*.json',
image: [
`./src*.{png,jpg,jpeg,svg,gif}`,
`!src_*_*.{png,jpg,jpeg,svg,gif}`
],
less: [
`./src*.less`,
`!src_*_*.less`,
`!src/less*'
})
})
gulp.task('image', () => {
image()
})
gulp.task('image:watch', () => {
watch(srcDir.image, {event: ['add','change','unlink']}, () => {
image()
})
})
gulp.task('json', () => {
json()
})
gulp.task('json:watch', () => {
watch([srcDir.json], {event: ['add','change','unlink']}, ()=>{
json()
})
})
gulp.task('js', () => {
js()
})
gulp.task('js:watch', () => {
watch([srcDir.js], {event: ['add','change','unlink']}, (file)=>{
js(file)
})
})
gulp.task('wxss', () => {
compileWxss(srcDir.wxss, distDir)
})
gulp.task('wxss:watch', () => {
watch([srcDir.wxss], {event: ['add','change','unlink']}, (file)=>{
compileWxss(srcDir.wxss, distDir, file)
})
})
gulp.task('less', () => {
compileLess(srcDir.less, distDir)
})
gulp.task('less:watch', () => {
watch(srcDir.less, {event: ['add','change','unlink']}, function(file){
compileLess(srcDir.less, distDir, file)
})
})
gulp.task('views', () => {
views()
})
gulp.task('views:watch', () => {
watch([srcDir.views], {event: ['add','change','unlink']}, (file)=>{
views(file)
})
})
gulp.task('clean', () => {
del([
'dist*'
])
})
// development下编译
gulp.task('dev', () => {
gulp.start('image', 'image:watch', 'json', 'json:watch', 'js', 'js:watch',
'wxss', 'wxss:watch', 'less', 'less:watch', 'views', 'views:watch', 'server')
})
// product下编译
gulp.task('build', () => {
isBuild = true
console.log('\n')
console.log(colorStyle['blue'][0] + '> Starting building...' + colorStyle['blue'][1])
console.log('\n')
gulp.start(['image', 'json', 'js', 'wxss', 'less', 'views'], function(){
console.log(colorStyle['green'][0] + '> Build success' + colorStyle['green'][1])
})
})
// 编译image文件
function image() {
gulp.src(srcDir.image)
.pipe(imagemin())
.pipe(gulp.dest(distDir))
.on('end',() => {
console.log(colorStyle['green'][0] + '> Image complite!' + colorStyle['green'][1])
})
}
// 编译json
function json() {
gulp.src(srcDir.json)
.pipe(gulp.dest(distDir))
.on('end', () => {
console.log(colorStyle['green'][0] + '> Json complite!' + colorStyle['green'][1])
})
}
// 编译js
function js(file) {
gulp.src(srcDir.js)
.pipe(jshint())
.pipe(gulp.dest(distDir))
.on('end', () => {
if(file){
console.log('\n')
console.log(colorStyle['green'][0] + '> JS Complite: ' + colorStyle['green'][1] + file.path + ' complite!')
}else{
console.log(colorStyle['green'][0] + '> JS complite!' + colorStyle['green'][1])
}
})
}
// 编译html、wxml文件成wxml
function views(file) {
gulp.src(srcDir.views)
.pipe(rename({extname: '.wxml'}))
.pipe(gulp.dest(distDir))
.on('end', () => {
if(file){
console.log('\n')
console.log(colorStyle['green'][0] + '> Wxml Complite: ' + colorStyle['green'][1] + file.path + ' complite!')
}else{
console.log(colorStyle['green'][0] + '> Wxml complite!' + colorStyle['green'][1])
}
})
}
/**
* [compileWxss 编译WXSS文件]
* @param {[string]} src [源目录]
* @param {[string]} dist [输出目录]
* @param {[string]} file [当前文件名,非必填]
*/
function compileWxss(src, dist, file) {
return gulp.src(src)
.pipe(base64({
extensions: [/\.png#datauri$/i, /\.jpg#datauri$/i],
maxImageSize: 10 * 1024
}))
.pipe(gulp.dest(dist))
.on('end', () => {
if(file){
console.log('\n')
console.log(colorStyle['green'][0] + '> JS Complite: ' + colorStyle['green'][1] + file.path + ' complite!')
}else{
console.log(colorStyle['green'][0] + '> Wxss complite!' + colorStyle['green'][1])
}
})
}
/**
* [compileWxss 编译less文件]
*/
function compileLess(src, dist, file) {
return gulp.src(src)
.pipe(plumber())
.pipe(less())
.pipe(base64({
extensions: [/\.png#datauri$/i, /\.jpg#datauri$/i],
maxImageSize: 10 * 1024
}))
.pipe(rename({extname: '.wxss'}))
.pipe(gulp.dest(dist))
.on('end', () => {
if(file){
console.log('\n')
console.log(colorStyle['green'][0] + '> WXSS Complite: ' + colorStyle['green'][1] + file.path + ' to wxss complite!')
}else{
console.log(colorStyle['green'][0] + '> Less to wxss complite!' + colorStyle['green'][1])
}
})
}
package.json文件
{
"name": "wx_demo",
"version": "1.0.0",
"description": "小程序demo",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp dev --color --profile",
"build": "gulp build --color --profile",
"clean": "gulp clean --color --profile"
},
"repository": {
"type": "git",
"url": "git@git.jd.com:wx_demo.git"
},
"keywords": [
"demo"
],
"author": "me",
"license": "MIT",
"devDependencies": {
"cssnano": "^3.8.0",
"del": "^2.2.2",
"express": "^4.16.2",
"gulp": "^3.9.1",
"gulp-base64": "^0.1.3",
"gulp-if-else": "^1.0.3",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-less": "^3.3.0",
"gulp-nodemon": "^2.2.1",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.2.0",
"gulp-rename": "^1.2.2",
"gulp-watch": "^4.3.11",
"jshint": "^2.9.4",
"postcss": "^5.2.6",
"postcss-base64": "^0.4.1",
"postcss-import": "^8.2.0",
"precss": "^1.4.0"
}
}
server.js配置
const express = require('express')
let app = express()
app.use(express.static('./mock'))
const PORT = 8000
var server = app.listen(PORT, () => {
const host = server.address().address
console.log('\n')
console.log('\x1B[32m%s\x1B[39m', '> Server Listening at http://localhost:8000')
console.log('\n')
})