小程序-工程优化-自动化构建

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序痛点

1. 不支持 css预编译器,作为一种主流的 css解决方案，不论是 less,sass,stylus 都可以提升css效率
2. 不支持ES7等后续的js特性，好用的async await等特性都无法使用（小程序JavaScript支持情况）
3. 不支持引入外部字体文件，只支持base64
4. 没有 eslint 等代码检查工具

小程序框架

taro：京东前端团队
mpvue：美团前端团队
WePY：微信前端团队
uni-app：DCloud
Chameleon：滴滴前端团队

图片来源 aotu.io

基于glup的自动化构建

小程序 它的有点用起来很爽，它的缺点忍不了的我就改。

glup 简介

特点

基于流的自动化构建工具

1.代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。

2.基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。

3.遵循严格的准则，确保插件结构简单、运行结果可控。

使用

1. 创建 Gulpfile
2. 创建任务（task）

css预编译器

function task_css () {
  return gulp
    .src(cssFile, { since: gulp.lastRun(task_css) ,allowEmpty: true })
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(
      rename(path => {
        path.extname = '.wxss'
      })
    )
    .pipe(gulp.dest('../dist/'))
}

支持ES7等后续的js特性

function task_js () {
  return gulp
    .src(jsFile, { since: gulp.lastRun(task_js) ,allowEmpty: true })
    .pipe(eslint())
    .pipe(preprocess({
            context: {
                // 此处可接受来自调用命令的 NODE_ENV 参数
        NODE_ENV: process.env.NODE_ENV || 'ONLINE',
        NODE_VERSION: version
            },
    }))
    .pipe(
            babel({
                presets: ['@babel/env']
            })
        )
    .pipe(gulp.dest('../dist/'))
}

支持引入外部字体文件，

fontSpider=require('gulp-font-spider'),
gulp.task('testfont',function () {
  gulp.src('*.html')
  .pipe(fontSpider())
  .pipe(notify({
    message: 'font compress done'
  }));
});

eslint 代码检查

  "scripts": {
 
    "lint": "eslint --ext .js --ignore-path .eslintignore .",
    "fix": "eslint --fix --ignore-path .eslintignore .",
  },
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js, scss}": [
      "eslint --ext",
      "git add"
    ]
  },

实时监测代码变化自动构建

function task_watch () {
  gulp.watch(cssFile, task_css)
  gulp.watch(jsFile, task_js)
  gulp.watch(jsonFile, task_json)
  gulp.watch(imageFile, task_image)
  gulp.watch(wxmlFile, task_wxml)
  gulp.watch(configJson, task_npm)
}

任务组合+默认任务

gulp.task(
  'default',
  gulp.series(
    task_clean,
    gulp.parallel(
      task_package_json,
      task_npm,
      task_css,
      task_js,
      task_json,
      task_wxml,
      task_image,
      task_watch
    )
  )
)