微信小程序-gulp构建

项目采用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 = falseconst 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}`,    `!src/**/_*.{png,jpg,jpeg,svg,gif}`  ],  less: [    `./src/**/*.less`,    `!src/**/_*/*.less`,    `!src/**/_*.less`,    `!src/less/*.less`  ]}// 输出目录const distDir = './dist'gulp.task('server', () => {  console.log(colorStyle['blue'][0] + '> Starting dev server...' + colorStyle['blue'][1])  nodemon({    script: './server.js',    watch: './mock/**/*'  })})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])    })}// 编译jsonfunction json() {  gulp.src(srcDir.json)    .pipe(gulp.dest(distDir))    .on('end', () => {      console.log(colorStyle['green'][0] + '> Json complite!' + colorStyle['green'][1])    })}// 编译jsfunction 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文件成wxmlfunction 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": "[e-mail]: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 = 8000var 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')})