gulp.js 基于流的自动化构建工具，对小程序代码进行打包

Java范思哲 2018-12-04 10:21:23 ⋅ 590 阅读

前言

因为项目原因，谈一下老生常谈的问题，前端虽然没有代理处理虽然是防君子不防小人局面，不过把es6以后的代码babel一下到es5，我发现我自己都难“李德顺”了。babel转js后，把所有的文件分别压缩一下，得到一份新的小程序代码。比较初级的做法，给自己留下个备忘录，大神勿喷。。。

方式

之前有幸在项目使用了gulp，一直有一个用gulp构建小程序的想法，今天趁此机会刚好实践一把。通过gulp实现代码处理，如下是必须的配置文件，放在小程序根目录下，然后将小程序的所有文件移至src下

  • gulpfile.js -- 使用了插件功能，支持gulp开头的插件

const gulp = require('gulp')
const SRC_DIR = './src/**/*'
const DIST_DIR = './dist/'
// Load plugins
const $ = require('gulp-load-plugins')()
// watch
gulp.task('watch', () => {
  gulp.watch(SRC_DIR + '.js', ['jasmine'
  gulp.watch(SRC_DIR + '.json', ['jsonmin'])
  gulp.watch('./src/assets/**', ['assets'])
  gulp.watch(SRC_DIR + '.wxml', ['wxmlmin'])
  gulp.watch(SRC_DIR + '.wxss', ['wxssmin'])
})
// js
gulp.task('jsmin', () => {  
    return gulp
    .src(SRC_DIR + '.js')
    .pipe(
      $.babel({
        presets: ['es2015']
      })
    )
    .pipe(
      $.uglify({
        compress: true
      })
    )
    .pipe(gulp.dest(DIST_DIR))
})
// son
gulp.task('jsonmin', () => {  
    return gulp
    .src(SRC_DIR + '.json')
    .pipe($.jsonminify2())
    .pipe(gulp.dest(DIST_DIR))
})
// assets
gulp.task('assets', () => {  
    return gulp.src('./src/assets/**').pipe(gulp.dest('./dist/assets'))
})
// ixml
gulp.task('wxmlmin', () => {  
    return gulp
    .src(SRC_DIR + '.wxml')
    .pipe(
      $.htmlmin({
        collapseWhitespace: true,
        removeComments: true,
        keepClosingSlash: true
      })
    )
    .pipe(gulp.dest(DIST_DIR))
})
// wuss
gulp.task('wxssmin', () => {    
return gulp.src(SRC_DIR + '.wxss')
    .pipe($.autoprefixer(['iOS >= 8', 'Android >= 4.1']))
    .pipe($.rename(path => (path.extname = '.wxss')))
    .pipe($.minifyCss())
    .pipe(gulp.dest(DIST_DIR))
})
// build
gulp.task('build', [  'jasmine  'jsonmin',  'assets',  'wxmlmin',  'wxssmin' ]); // no console gulp.task("nodebug", () => {  return gulp    .src('./dist/**/*.js')    .pipe($.stripDebug())    .pipe(gulp.dest(DIST_DIR)) }) // publish - 不是gulp插件 const runSequence = require('run-sequence') gulp.task('product', ['clean'], () => {  // 顺序执行  runSequence('build', 'nosebag'); }) // clean - 不是gulp插件 const del = require('del') gulp.task('clean', () => {  return del([DIST_DIR + '**']) })

  • .babelrc -- 需要配置，不然async/await不能babel

{  "plugins": [      
    "transform-strict-mode",      
    "transform-es2015-modules-commonjs",      
    "transform-s2015-spread",'      
    "transform-es2015-destructuring",      
    "transform-s2015-parameters",
  ],  
    "presets": [      "es2015",      "stage-0"
  ]
}

  • package.json -- node依赖，使用nam下载

{  
    "dependencies": {    
    "autoprefixer": "^6.6.0",    
    "babel-eslint": "^7.1.1",    
    "babel-preset-latest": "^6.16.0",    
    "del": "^2.2.2",    
    "gulp": "^3.9.1",    
    "gulp-autoprefixer": "^3.1.1",    
    "gulp-babel": "^6.1.2",    
    "gulp-eslint": "^3.0.1",    
    "gulp-htmlmin": "^3.0.0",    
    "gulp-jsonlint": "^1.2.0",   
    "gulp-jsonminify2": "^1.0.0",    
    "gulp-minify-css": "^1.2.4",    
    "gulp-postcss": "^6.2.0",    
    "gulp-rename": "^1.2.2",    
    "gulp-strip-debug": "^3.0.0",    
    "gulp-uglify": "^2.0.0",    
    "run-sequence": "^1.2.2"
  },  
    "devDependencies": {    
    "babel-preset-stage-0": "^6.24.1",    
    "gulp-load-plugins": "^1.5.0"
  }
}

说明

  • 流程详见 gulpfile.js 注释

  • 如果用到了less或者sass，可以配置watch，目前我是通过vscode的Easy WXLess插件做转换，gulp的目的就是发布。如果需要实时调试可启用watch

  • 建议关闭微信的es6转es5，代码压缩

备注

  • gulp 4.0 任务执行有变动，有同步和异步处理

更新 - gulp 4.0 方案

  • 更新 package.json -- 去掉 run-sequence 同步处理，4.0已自带

{  "repository": {    
    "type": "",    
    "url": ""
  },  
"description": "deal applet codo by gulp",  
"license": "ISC",  
"dependencies": {    
    "gulp": "^4.0.0",    
    "autoprefixer": "^6.6.0",    
    "babel-eslint": "^7.1.1",    
    "babel-preset-latest": "^6.16.0",    
    "del": "^2.2.2",    
    "gulp-autoprefixer": "^3.1.1",    
    "gulp-babel": "^6.1.2",    
    "gulp-eslint": "^3.0.1",    
    "gulp-htmlmin": "^3.0.0",    
    "gulp-jsonlint": "^1.2.0",    
    "gulp-jsonminify2": "^1.0.0",    
    "gulp-minify-css": "^1.2.4",    
    "gulp-postcss": "^6.2.0",    
    "gulp-rename": "^1.2.2",    
    "gulp-strip-debug": "^3.0.0",    
    "gulp-uglify": "^2.0.0"
  },  
    "devDependencies": {    
    "babel-preset-stage-0": "^6.24.1",    
    "gulp-load-plugins": "^1.5.0"
  }
}

  • 更新 gulpfile.js -- bulid 命令是异步的；product命令是同步的，先删除，再build，最后去掉打印

const gulp = require('gulp')
const SRC_DIR = './src/**/*'
const DIST_DIR = './dist/'// Load plugins
const $ = require('gulp-load-plugins')()/
/ watch
gulp.task('watch', () => {
  gulp.watch(SRC_DIR + '.js', ['jasmine'
  gulp.watch(SRC_DIR + '.json', ['jsonmin'])
  gulp.watch('./src/assets/**', ['assets'])
  gulp.watch(SRC_DIR + '.wxml', ['wxmlmin'])
  gulp.watch(SRC_DIR + '.wxss', ['wxssmin'])
})
// js
function jsmin() {  return gulp
    .src(SRC_DIR + '.js')
    .pipe(
      $.babel({        
        presets: ['es2015']
      })
    )
    .pipe(
      $.uglify({        
        compress: true
      })
    )
    .pipe(gulp.dest(DIST_DIR))
}
// son
function jsonmin() {  return gulp
    .src(SRC_DIR + '.json')
    .pipe($.jsonminify2())
    .pipe(gulp.dest(DIST_DIR))
}
// assets
function assets() {  
    return gulp.src('./src/assets/**').pipe(gulp.dest('./dist/assets'))
}
// ixml
function wxmlmin() {  
    return gulp
    .src(SRC_DIR + '.wxml')
    .pipe(
      $.htmlmin({        
        collapseWhitespace: true,        
        removeComments: true,        
        keepClosingSlash: true
      })
    )
    .pipe(gulp.dest(DIST_DIR))
}
// wuss
function wxssmin() {  
    return gulp
    .src(SRC_DIR + '.wxss')
    .pipe($.autoprefixer(['iOS >= 8', 'Android >= 4.1']))
    .pipe($.rename(path => (path.extname = '.wxss')))
    .pipe($.minifyCss())
    .pipe(gulp.dest(DIST_DIR))
}
// no console
function nodebug () {  return gulp
    .src('./dist/**/*.js')
    .pipe($.stripDebug())
    .pipe(gulp.dest(DIST_DIR))
}
// build
gulp.task(  'build',
  gulp.parallel(jsmin, jsonmin, assets, wxmlmin, wxssmin)
)
// publish
gulp.task('product', gulp.series(clean, "build", nosebag))
// clean - 不是gulp插件
const del = require('del')
function clean() {  
    return del([DIST_DIR + '**'])
}

感谢：苏星河 - gulp 4.0 升级指南

  1. gulp.task 移除了三参数语法，现在不能使用数组来指定一个任务的依赖。gulp 4.0 加入了 gulp.series 和 gulp.parallel 来实现任务的串行化和并行化。

  2. 任务函数中，如果任务是同步的，需要使用 done 回调。这样做是为了让 gulp 知道你的任务何时完成。

  3. 如果任务是异步的，有多个方法可以标记任务完成：1. 回调，2. 返回流（Stream），3. 返回 Promise，4. 返回子进程。

  4. 将task通过 js 函数的提升特性，可以将一些task定义为函数，好处就是私有化，不过就不再是gulp的命令，需要通过主task来启动

  • 若需要同步任务，想避免显式调用done方法，可以将任务添加到串行队列执行，任务提供异步返回，保持和gulp3 一致就行。


作者：pruple_Boy
链接：https://www.jianshu.com/p/a33698ed3dd1

---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




注意：本文归作者所有，未经作者允许，不得转载

阅读全部

全部评论: 0 条

    我有话说:

    微信小程序实战篇：基于wxcharts.js绘制移动报表

    微信小程序图表插件（wx-charts）是基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 ......

    微信小程序电商实战-商品列表流式布局

    今天给大家分享一下微信小程序中商品列表的流式布局方式，根据文章内容操作就可以看到效果哦~~~

    微信小程序实现商品数量加减

    这是一个用微信小程序原生代码实现的数量加减demo，主要是用于商品购物车或者商品详情修改数量使用

    微信小程序实战篇：如何解决https域名问题 ？

    开发自己的微信小程序绕不开https问题，为了能在小程序中调用我们自己的API服务请打开看一看吧！！！

    2018年8个技巧来构建更好的Node.js应用程序

    2018年8个技巧来构建更好的Node.js应用程序

    微信小程序电商实战-入门篇

    小程序开发工具有新版本更新啦！开发体验更好了，接下来一起为电商小程序做一下准备前期准备工作~~

    微信小程序-Image的widthFix属性和rpm尺寸的使用

    在做微信小程序的商品详情页，商品的详情是图片集合，渲染完成后发现图片加载的很不自然

    精品推荐：微信小程序常见的UI框架/组件库

    想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型

    微信小程序 - iconfont 图标字体

    你还在使用图片作为小程序的图标？大猪告诉大家如何在小程序上使用iconfont字体图标

    A3Mall v1.5.2 发布，免费开源的 PHP 小程序商城系统

    项目介绍 A3Mall商城系统是基于ThinkPhp6.0+Vue开发的一套移动电商系统， 支持微信公众号商城、H5商城、小程序商城，支持多种营销活动，优惠劵、订单活动、团购、秒杀、会员特价、积分

    微信小程序电商实战-购物车（上）

    好久没更新小程序电商实战的文章了，是因为最近一直做整体架构调整，一些准备工作也是比较耗费时间的。在这几天将会有新版的 小程序电商教程推出.......

    「开源资讯」BookChat v2.4 发布，通用书籍阅读微信小程序

    BookChat - 面向程序员的开源书籍和文档阅读学习小程序

    微信小程序电商实战-商品详情（上）

    先看一下今天要实现的小程序商品详情页吧！

    微信小程序实战篇：小程序之页面数据传递

    我们在写小程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......

    微信小程序抖音实战-首页（下）

    抖音小程序首页动态数据获取

    热门微信小程序日历组件，可以更多自定义功能

    开源微信小程序日历组件

    微信小程序微商城（一）：https框架搭建并实现导航功能

    本文将带领大家搭建https的小程序框架，并实现动态获取数据展示效果！

    Gradle 7.0 发布，自动化构建工

    Gradle 7.0 现已发布。Gradle 是一个基于 Apache Ant 和 Apache Maven 概念的项目自动化构建工具

    微信小程序抖音实战-首页（上）

    你也可以用微信小程序编写一个抖音