最近公司要求把一套公众号项目的页面迁移到小程序,也就意味着要重新敲一份代码,不能更繁琐了,为了节省时间,提高迁移效率,就决定自己动手用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等等,希望路过的大神指点,有什么更好的方案可以指点一二。
 
 

gulp提高微信小程序开发效率的更多相关文章

  1. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

  2. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  3. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

  4. 让微信小程序开发如鱼得水

      关于微信小程序开发一直想写一篇相关的文章总结和记录下,结果拖延症犯了迟迟没有下笔:这不最近天气不错,于是找一个空闲的下午将这篇文章输出下(好像跟天气没啥关系),那我们就开始吧! 注意:本文默认开发 ...

  5. VSCode 微信小程序 开发环境配置 详细教程

    本博客已暂停更新,需要请转新博客http://www.whbwiki.com/231.html 配置 VsCode 微信小程序开发环境并非不用官方的 微信小程序开发者工具 ,而是两者配合适用,可以极大 ...

  6. 微信小程序开发库grace vs wepy

    grace和wepy都是辅助小程序开发的开源库,本文对两者做个对比. 注:本文是作者本人的一些拙见,纯粹的技术讨论,不想引起技术信仰之争,欢迎积极.正向的讨论及建议. 如果你还不了解Grace, 请参 ...

  7. 微信小程序开发 (资料汇总,谁还没被坑过?希望助你绕过一些坑)

    最近帮人家做一个微信小程序,刚好想熟悉一下.由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式. 后台服务器是windows server,后台程序是.Net  WebA ...

  8. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  9. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. [Bayesian] “我是bayesian我怕谁”系列 - Gaussian Process

    科班出身,贝叶斯护体,正本清源,故拿”九阳神功“自比,而非邪气十足的”九阴真经“: 现在看来,此前的八层功力都为这第九层作基础: 本系列第九篇,助/祝你早日hold住神功第九重,加入血统纯正的人工智能 ...

  2. C# 扩展方法使用

    为指定类型扩展方法: 定义类Class1: public static class Class1                                  //必须为static类,且不能包含 ...

  3. PHP和java比较

    这样从几个方面来看:一.运行机制:Java代码被编译成字节码后,会在虚拟机里由JIT进行二次编译成为本地码,据传言其执行速度可以和C++相媲美,经过我自己测试,用Java实现一个简单的Memcache ...

  4. 结合程序崩溃后的core文件分析bug

    引言     在<I/O的效率比较>中,我们在修改图1程序的BUF_SIZE为8388608时,运行程序出现崩溃,如下图1:          图1. 段错误     一般而言,导致程序段 ...

  5. SQL Server 分页技术(存储过程)

    alter proc proc_getpage ), )='*', ), )='asc', @pagesize int , @pageindex int, )='' as begin declare ...

  6. MongoDB中的MapReduce介绍与使用

    一.简介 在用MongoDB查询返回的数据量很大的情况下,做一些比较复杂的统计和聚合操作做花费的时间很长的时候,可以用MongoDB中的MapReduce进行实现 MapReduce是个非常灵活和强大 ...

  7. JAVA基础3——常见关键字解读(1)

    常见的JAVA中的关键字 static static静态变量 静态变量:使用static关键字定义的变量.static可以修饰变量和方法,也有static静态代码块.被static修饰的成员变量和成员 ...

  8. 匿名HTTP透明HTTP高匿HTTP区别

    透明代理的意思是客户端根本不需要知道有代理服务器的存在,但是它传送的仍然是真实的IP.你要想隐藏的话,不要用这个. 普通匿名代理能隐藏客户机的真实IP,但会改变我们的请求信息,服务器端有可能会认为我们 ...

  9. SpringMvc架构下css、js、jpg加载失败问题

    SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...

  10. 用python 抓取B站视频评论,制作词云

    python 作为爬虫利器,与其有很多强大的第三方库是分不开的,今天说的爬取B站的视频评论,其实重点在分析得到的评论化作嵌套的字典,在其中取出想要的内容.层层嵌套,眼花缭乱,分析时应细致!步骤分为以下 ...