微信小程序-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 = 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}`,
    `!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])
    })
}

// 编译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')
})