gulp提高微信小程序開發效率

  最近公司要求把一套公眾號項目的頁面遷移到小程序，也就意味着要重新敲一份代碼，不能更繁瑣了，為了節省時間，提高遷移效率，就決定自己動手用gulp搭一個簡易的小程序框架，再記錄一下搭建過程。希望有大神可以給我提提意見，多多指點。

  首先，公眾號項目用的是vue框架，用的的技術棧包括vue-cli+webpack+axios+scss+es6+vuex+vux，為了配合之前的開發模式，用gulp做了以下配置：

/* eslint-disable */
const fs = require('fs')
const path = require('path')

const gulp = require('gulp')
const gulpLoadPlugins = require('gulp-load-plugins')
const del = require('del')
const runSequence = require('run-sequence')
const inquirer = require('inquirer')
const generatePage = require('generate-weapp-page')

// 加載所有的插件
const plugins = gulpLoadPlugins()
const api = require('./src/utils/config')
const env = process.env.NODE_ENV || 'development'
const isProduction = () => env === 'production'

// 生成頁面文件的方法
function generateFile (options) {
  const files = generatePage({
    root: path.resolve(__dirname, './src/pages/'),
    name: options.pageName,
    scss: options.styleType === 'scss',
    css: options.styleType === 'css',
    json: options.needConfig
  })
  files.forEach && files.forEach(file => plugins.util.log('[generate]', file))
  return files
}

function generateJson (options) {
  const filename = path.resolve(__dirname, 'src/app.json')
  const now = fs.readFileSync(filename, 'utf8')
  const temp = now.split('\n    // Dont remove this comment')
  if (temp.length !== 2) {
    return plugins.util.log('[generate]', 'Append json failed')
  }
  const result = `${temp[0].trim()},
    "pages/${options.pageName}/${options.pageName}"
  ${temp[1].trim()}
`
  fs.writeFileSync(filename, result)
}

/**
 * 清除文件
 */
gulp.task('clean', del.bind(null, ['dist/*']))

/**
 * 添加eslint規范
 */
gulp.task('lint', () => {
  return gulp.src(['*.{js,json}', '**/*.{js,json}', '!node_modules/**', '!dist/**', '!**/bluebird.js'])
    .pipe(plugins.eslint())
    .pipe(plugins.eslint.format('node_modules/eslint-friendly-formatter'))
    .pipe(plugins.eslint.failAfterError())
})

/**
 * 編譯js文件
 */
gulp.task('compile:js', () => {
  return gulp.src(['src/**/*.js'])
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.babel())
    .pipe(plugins.if(isProduction, plugins.uglify()))
    .pipe(plugins.sourcemaps.write('.'))
    .pipe(gulp.dest('dist'))
})

/**
 * 編譯wxml文件
 */
gulp.task('compile:wxml', () => {
  return gulp.src(['src/**/*.wxml'])
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.if(isProduction, plugins.htmlmin({
      collapseWhitespace: true,
      // collapseBooleanAttributes: true,
      // removeAttributeQuotes: true,
      keepClosingSlash: true, // wxml
      removeComments: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true
    })))
    .pipe(plugins.rename({ extname: '.wxml' }))
    .pipe(plugins.sourcemaps.write('.'))
    .pipe(gulp.dest('dist'))
})

/**
 * 將scss轉為css並輸出到dist目錄
 */
gulp.task('compile:scss', () => {
  return gulp.src(['src/**/*.scss'])
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.sass())
    .pipe(plugins.if(isProduction, plugins.cssnano({ compatibility: '*' })))
    .pipe(plugins.rename({ extname: '.wxss' }))
    .pipe(plugins.sourcemaps.write('.'))
    .pipe(gulp.dest('dist'))
})

/**
 * 編譯json文件
 */
gulp.task('compile:json', () => {
  return gulp.src(['src/**/*.json'])
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.jsonminify())
    .pipe(plugins.sourcemaps.write('.'))
    .pipe(gulp.dest('dist'))
})

/**
 * 編譯圖片文件
 */
gulp.task('compile:img', () => {
  return gulp.src(['src/**/*.{jpg,jpeg,png,gif}'])
    .pipe(plugins.imagemin())
    .pipe(gulp.dest('dist'))
})

/**
 * 編譯源文件到目標目錄
 */
gulp.task('compile', ['clean'], next => {
  runSequence([
    'compile:js',
    'compile:wxml',
    'compile:scss',
    'compile:json',
    'compile:img'
  ], next)
})

/**
 * 復制文件到dist目錄
 */
gulp.task('extras', [], () => {
  return gulp.src([
    'src/**/*.*',
    '!src/**/*.js',
    '!src/**/*.wxml',
    '!src/**/*.scss',
    '!src/**/*.json',
    '!src/**/*.{jpe?g,png,gif}'
  ])
  .pipe(gulp.dest('dist'))
})

/**
 * Build
 */
gulp.task('build', ['lint'], next => runSequence(['compile', 'extras'], next))

/**
 * 監聽文件變化
 */
gulp.task('watch', ['build'], () => {
  gulp.watch('src/**/*.js', ['compile:js'])
  gulp.watch('src/**/*.wxml', ['compile:wxml'])
  gulp.watch('src/**/*.scss', ['compile:scss'])
  gulp.watch('src/**/*.json', ['compile:json'])
  gulp.watch('src/**/*.{jpe?g,png,gif}', ['compile:img'])
})

/**
 * 執行gulp generate自動生成文件目錄，會自動生成一個文件目錄，包括wxml,scss,json,js文件，並把頁面加到app.json中
 */
gulp.task('generate', next => {
  inquirer.prompt([
    {
      type: 'input',
      name: 'pageName',
      message: 'Input the page name',
      default: 'index'
    },
    {
      type: 'confirm',
      name: 'needConfig',
      message: 'Do you need a configuration file',
      default: false
    },
    {
      type: 'list',
      name: 'styleType',
      message: 'Select a style framework',
      // choices: ['less', 'scss', 'css'],
      choices: ['scss'],
      default: 'scss'
    }
  ])
  .then(options => {
    const res = generateFile(options)
    if (res) generateJson(options)
  })
  .catch(err => {
    throw new plugins.util.PluginError('generate', err)
  })
})

/**
 * 默認任務
 */
gulp.task('default', ['watch'])

 

用了延續之前的開發習慣，在package.json中配置如下script

 "scripts": {
    "lint": "gulp lint",
    "dev": "cross-env NODE_ENV=development gulp watch",
    "generate": "gulp generate",
    "build": "cross-env NODE_ENV=production gulp build"
  },

運行npm run dev即可監聽文件變化，運行npm run build編譯成線上項目。

編輯器方面，官方的開發者工具講真我用的很不順手，所以我習慣用Egret Wing編輯src目錄下的代碼，用開發者工具查看dist目錄下的頁面效果並調試。

運行npm run generate可以快速生成文件目錄，就不用一個文件一個文件的新建還要跑到app.json中去注冊了。

這樣一來樣式可以直接copy過來，eslint規范一致，js代碼也可以直接copy,只要注意放在合適的函數內即可。其次對接口的調用進行封裝，只要將底層的axios調用改成微信的request調用，其他使用方法保持一致。

感覺最麻煩的就是將vue風格的代碼轉換成wxml編碼規范，目前只能手動將div改成view,v-if改成wx:if,@click改成bindtap等等,希望路過的大神指點，有什么更好的方案可以指點一二。