手把手教你在小程序项目中配置Gulp

如果是做原生小程序开发，你是否想过在你的小程序项目中也加入一些工程的东西？本文将手把手教你在小程序中配置一些工程化的东西，基于我自身的痛点，目前有 支持Less、支持路径别名、图片自动压缩，上传七牛、打包加入Eslint检查这么几个功能，后期有遇到其他需要再更新。

在小程序项目中我目前用的是Gulp。为啥不用热门的webpack？因为我觉得对于小程序项目来说gulp足够了，关键是配置非常简单，流式管理简单明了，不了解Gulp的大家可以去官网看看。

需要提醒的是，以下举例的gulpfie基于gulp 4.0，配置上与之前的版本略有不同，不过变化不大。详细的大家可以点这里去看看。

项目结构

项目结构

gulpfile.js 我们放在根目录下，初始长这样

  1. const { src, dest, parallel, watch, series } = require('gulp');
  3. function defaultTask(cb) {
  4.   // place code for your default task here
  5.   cb();
  6. }
  8. exports.default = defaultTask

接下来我们将一个任务一个任务往里面添加。

支持Less

由于平时项目中习惯了用CSS 预处理语言，wxss的原始css 写法让我写起项目来很难受。我个人比较习惯使用Less，习惯使用sass的大家自己找一下相关插件替换一下就行。gulp中处理less的插件是gulp-less，gulp-less把文件处理完成后我们还需要把文件名改成.wxss所以我们还需要一个重命名插件，这里用的是gulp-rename。

gulpfile.js如下：

  1. const { src, dest, parallel, watch, series } = require('gulp');
  2. const Path = require('path');
  3. const Less = require('gulp-less');
  4. const Rename = require('gulp-rename');
  6. const path = {
  7.     lessPath: ['src/**/*.less'],
  8. };
  10. function wxss() {
  11.     return src(path.lessPath, { base: 'src/' })
  12.         .pipe(Less())
  13.         .pipe(Rename({
  14.             extname: '.wxss',
  15.         }))
  16.         .pipe(dest('dist'));
  17. }
  19. exports.default = series(wxss);

需要注意的是上面的 src() 在第二个参数传入了 {base: 'src/'}，至于原因嘛，跟我们配的匹配less文件路径 src/**/*.less有关。感兴趣的同学可以结合 Explaining Globs看看，这里我不细说。

当然如果你想对wxss进行压缩可以使用gulp-csso 。

  1. const { src, dest, parallel, watch, series } = require('gulp');
  2. const Path = require('path');
  3. const Less = require('gulp-less');
  4. const Rename = require('gulp-rename');
  5. const Csso = require('gulp-csso');
  6. const GulpIf = require('gulp-if');
  8. const path = {
  9.     lessPath: ['src/**/*.less'],
  10. };
  12. function wxss() {
  13.     return src(path.lessPath, { base: 'src/' })
  14.         .pipe(Less())
  15.         .pipe(GulpIf(process.env.NODE_ENV === 'production', Csso()))
  16.         .pipe(Rename({
  17.             extname: '.wxss',
  18.         }))
  19.         .pipe(dest('dist'));
  20. }
  22. exports.default = series(wxss);

支持路径别名

在项目中，如果应用文件路径过深过长，不仅开发者写起来费劲，还容易出错且代码观赏性很差。小程序中路径别名我们用gulp-wechat-weapp-src-alisa，支持在 .wxml、.wxss/less、.js 中使用。

  1. const { src, dest, parallel, watch, series } = require('gulp');
  2. const Path = require('path');
  3. const Less = require('gulp-less');
  4. const Rename = require('gulp-rename');
  5. const Csso = require('gulp-csso');
  6. const GulpIf = require('gulp-if');
  7. const Alias = require('gulp-wechat-weapp-src-alisa');
  10. // 匹配文件路径
  11. const path = {
  12.     lessPath: ['src/**/*.less'],
  13.     jsPath: ['src/**/*.js'],
  14.     copy: ['src/**/*.wxml', 'src/**/*.json', 'src/**/*.wxs'],
  15. };
  17. // 路径拼接
  18. function _join(dirname) {
  19.     return Path.join(process.cwd(), 'src', dirname);
  20. }
  22. // 引用路径别名配置
  23. const aliasConfig = {
  24.     '@Libs': _join('libs'),
  25.     '@Utils': _join('utils'),
  26.     '@Components': _join('components'),
  27.     '@Style': _join('style'),
  28.     '@Images': _join('images'),
  29. };
  31. function wxss() {
  32.     return src(path.lessPath, { base: 'src/' })
  33.         .pipe(Alias(aliasConfig))
  34.         .pipe(Less())
  35.         .pipe(GulpIf(process.env.NODE_ENV === 'production', Csso()))
  36.         .pipe(Rename({
  37.             extname: '.wxss',
  38.         }))
  39.         .pipe(dest('dist'));
  40. }
  42. function js() {
  43.     return src(path.jsPath)
  44.         .pipe(Alias(aliasConfig))
  45.         .pipe(dest('dist'));
  46. }
  48. // 针对wxs,wxml,json文件直接复制
  49. function copy() {
  50.     return src(path.copy)
  51.         .pipe(Alias(aliasConfig))
  52.         .pipe(dest('dist'));
  53. }
  55. exports.default = series(wxss， js);

使用效果

.js
  1. import * as Utils from '@Utils/base';
  2. // require('@Libs/WXPage/index');
  4. // 编译后
  5. import * as Utils from '../../utils/base';
  6. // require('libs/WXPage/index');
.less
  1. // index.less
  2. @import '@Style/variables.less';
  4. .bg {
  5.   background-image: url('@Images/32821027.jpgg');
  6. }
  7. .usermotto {
  8.     margin-top: 200px;
  9.     color: @txt-highlight;
  10. }
  12. // 编译后
  13. .bg {
  14.   background-image: url('../../images/32821027.jpg');
  15. }
  16. .usermotto {
  17.   margin-top: 200px;
  18.   color: #FD7622;
  19. }
.wxml
  1. <!--logs.wxml-->
  2. <import src="@Utils/index.wxs" />
  4. <image  src="@Images/32821027.jpg" mode="cover"></image>
  6. // 编译后
  7. <import src="../../utils/index.wxs" />
  8. <image  src="../../images/32821027.jpg" mode="cover"></image>

图片自动压缩，上传七牛

由于小程序对代码包有限制，每1KB空间对小程序项目都十分珍贵，而且从用户体验来说，过大的代码包对首次进入小程序的用户来说下载时间会过长。基于这些原因我们几乎不会选择把图片放在小程序代码包中，那就只能上传图片服务器了。

上传图片之前需要对图片进行压缩，可能有些通许是通过手动来做这部分工作的，其实可以用工具来的嘛。压缩图片用的插件是gulp-imagemin, 我的图片是上传到七牛,对应的插件是gulp-qiniu-utils。

接下来我们在gulpfile中添加图片相关任务

  1. const { src, dest, parallel, watch, series } = require('gulp');
  2. const Path = require('path');
  3. const Less = require('gulp-less');
  4. const Rename = require('gulp-rename');
  5. const Csso = require('gulp-csso');
  6. const GulpIf = require('gulp-if');
  7. const Alias = require('gulp-wechat-weapp-src-alisa');
  8. const ImageMin = require('gulp-imagemin');
  9. const UrlPrefixer = require('gulp-url-prefixer');
  10. const Qiniu = require('gulp-qiniu-utils');
  12. // 匹配文件路径
  13. const path = {
  14.     lessPath: ['src/**/*.less'],
  15.     jsPath: ['src/**/*.js'],
  16.     copy: ['src/**/*.wxml', 'src/**/*.json', 'src/**/*.wxs'],
  17. };
  19. // 七牛相关配置
  20. const qiniuOptions = {
  21.     ak: 'ac key',
  22.     sk: 'sk key',
  23.     zone: 'Zone_z0', // 空间对应存储区域（华东：z0，华北：z1，华南：z2，北美：na0）
  24.     bucket: 'hynal-com', // 七牛对应空间
  25.     upload: {
  26.         dir: './dist/images', // 上传本地目录
  27.         // prefix: 'test/', // 上传时添加的前缀，可省略
  28.         except: /\.(html|js)$/, // 上传时不上传文件的正则匹配
  29.     },
  30.     remote: {
  31.         url: 'https://*****.com', // 七牛空间域名
  32.         prefix: {
  33.             default: 'test/', // 七牛空间默认前缀，如果下面三个相同可省略
  34.             remove: 'test/', // 七牛空间删除前缀
  35.             prefetch: 'test/', // 七牛空间预取前缀
  36.             refresh: 'test/', // 七牛空间刷新前缀
  37.         },
  38.     },
  39. };
  41. const urlPrefix = {
  42.     prefix: 'https://cdn.liayal.com/dist',
  43.     tags: ['image'],
  44. };
  46. // 路径拼接
  47. function _join(dirname) {
  48.     return Path.join(process.cwd(), 'src', dirname);
  49. }
  51. // 引用路径别名配置
  52. const aliasConfig = {
  53.     '@Libs': _join('libs'),
  54.     '@Utils': _join('utils'),
  55.     '@Components': _join('components'),
  56.     '@Style': _join('style'),
  57.     '@Images': _join('images'),
  58. };
  60. function wxss() {
  61.     return src(path.lessPath, { base: 'src/' })
  62.         .pipe(Alias(aliasConfig))
  63.         .pipe(Less())
  64.         .pipe(UrlPrefixer.css(urlPrefix))
  65.         .pipe(GulpIf(process.env.NODE_ENV === 'production', Csso()))
  66.         .pipe(Rename({
  67.             extname: '.wxss',
  68.         }))
  69.         .pipe(dest('dist'));
  70. }
  72. function js() {
  73.     return src(path.jsPath)
  74.         .pipe(Alias(aliasConfig))
  75.         .pipe(dest('dist'));
  76. }
  78. function imagemin() {
  79.     return src(path.images)
  80.         .pipe(ImageMin())
  81.         .pipe(dest('dist/images'));
  82. }
  85. const images = series(imagemin, (cb) => {
  86.     const qiniu = new Qiniu(qiniuOptions);
  87.     qiniu.upload();
  88.     cb();
  89. });
  91. // 针对wxs,wxml,json文件直接复制
  92. function copy() {
  93.     return src(path.copy)
  94.         .pipe(Alias(aliasConfig))
  95.         .pipe(UrlPrefixer.html(urlPrefix))
  96.         .pipe(dest('dist'));
  97. }
  99. exports.default = series(wxss， js， images);

上面我们还添加了一个 UrlPrefixer() 流，这个是把我们项目中引用的图片替换成上传七牛后的地址，需要配合七牛对应配置来设定。
如：

  1. // 替换前
  2. <image  src="@Images/32821027.jpg" mode="cover"></image>
  4. // 替换后
  5. <image  src="https://cdn.liayal.com/dist/images/32821027.jpg" mode="cover"></image>

打包加入Eslint检查

打包时加入Eslint检查可以让我们提早发现一些由代码引发问题，也方便推行代码规范。

下面我们在js任务中加入gulp-eslint

  1. const { src, dest, parallel, watch, series } = require('gulp');
  2. const Path = require('path');
  3. const Less = require('gulp-less');
  4. const Rename = require('gulp-rename');
  5. const Csso = require('gulp-csso');
  6. const GulpIf = require('gulp-if');
  7. const Alias = require('gulp-wechat-weapp-src-alisa');
  8. const ImageMin = require('gulp-imagemin');
  9. const UrlPrefixer = require('gulp-url-prefixer');
  10. const Qiniu = require('gulp-qiniu-utils');
  11. const ESLint = require('gulp-eslint');
  13. // 匹配文件路径
  14. const path = {
  15.     lessPath: ['src/**/*.less'],
  16.     jsPath: ['src/**/*.js'],
  17.     copy: ['src/**/*.wxml', 'src/**/*.json', 'src/**/*.wxs'],
  18. };
  20. // 七牛相关配置
  21. const qiniuOptions = {
  22.     ak: 'ac key',
  23.     sk: 'sk key',
  24.     zone: 'Zone_z0', // 空间对应存储区域（华东：z0，华北：z1，华南：z2，北美：na0）
  25.     bucket: 'hynal-com', // 七牛对应空间
  26.     upload: {
  27.         dir: './dist/images', // 上传本地目录
  28.         // prefix: 'test/', // 上传时添加的前缀，可省略
  29.         except: /\.(html|js)$/, // 上传时不上传文件的正则匹配
  30.     },
  31.     remote: {
  32.         url: 'https://*****.com', // 七牛空间域名
  33.         prefix: {
  34.             default: 'test/', // 七牛空间默认前缀，如果下面三个相同可省略
  35.             remove: 'test/', // 七牛空间删除前缀
  36.             prefetch: 'test/', // 七牛空间预取前缀
  37.             refresh: 'test/', // 七牛空间刷新前缀
  38.         },
  39.     },
  40. };
  42. const urlPrefix = {
  43.     prefix: 'https://cdn.liayal.com/dist',
  44.     tags: ['image'],
  45. };
  47. // 路径拼接
  48. function _join(dirname) {
  49.     return Path.join(process.cwd(), 'src', dirname);
  50. }
  52. // 引用路径别名配置
  53. const aliasConfig = {
  54.     '@Libs': _join('libs'),
  55.     '@Utils': _join('utils'),
  56.     '@Components': _join('components'),
  57.     '@Style': _join('style'),
  58.     '@Images': _join('images'),
  59. };
  61. function wxss() {
  62.     return src(path.lessPath, { base: 'src/' })
  63.         .pipe(Alias(aliasConfig))
  64.         .pipe(Less())
  65.         .pipe(UrlPrefixer.css(urlPrefix))
  66.         .pipe(GulpIf(process.env.NODE_ENV === 'production', Csso()))
  67.         .pipe(Rename({
  68.             extname: '.wxss',
  69.         }))
  70.         .pipe(dest('dist'));
  71. }
  73. function js() {
  74.     return src(path.jsPath)
  75.         .pipe(Alias(aliasConfig))
  76.         .pipe(ESLint())
  77.         .pipe(ESLint.format())
  78.         .pipe(dest('dist'));
  79. }
  81. function imagemin() {
  82.     return src(path.images)
  83.         .pipe(ImageMin())
  84.         .pipe(dest('dist/images'));
  85. }
  88. const images = series(imagemin, (cb) => {
  89.     const qiniu = new Qiniu(qiniuOptions);
  90.     qiniu.upload();
  91.     cb();
  92. });
  94. // 针对wxs,wxml,json文件直接复制
  95. function copy() {
  96.     return src(path.copy)
  97.         .pipe(Alias(aliasConfig))
  98.         .pipe(UrlPrefixer.html(urlPrefix))
  99.         .pipe(dest('dist'));
  100. }
  102. exports.default = series(wxss， js， images);

效果大概是这样的

也可以通过eslint.failOnError()或者eslint.failAfterError()在编译报错时中断编译。

END

最后完善一下gulpfile, 添加监测任务，添加一个clean任务

  1. const { src, dest, parallel, watch, series } = require('gulp');
  2. const Path = require('path');
  3. const Less = require('gulp-less');
  4. const Rename = require('gulp-rename');
  5. const Csso = require('gulp-csso');
  6. const GulpIf = require('gulp-if');
  7. const Alias = require('gulp-wechat-weapp-src-alisa');
  8. const ImageMin = require('gulp-imagemin');
  9. const UrlPrefixer = require('gulp-url-prefixer');
  10. const Qiniu = require('gulp-qiniu-utils');
  11. const ESLint = require('gulp-eslint');
  12. const Clean = require('gulp-clean');
  14. // 匹配文件路径
  15. const path = {
  16.     lessPath: ['src/**/*.less'],
  17.     jsPath: ['src/**/*.js'],
  18.     copy: ['src/**/*.wxml', 'src/**/*.json', 'src/**/*.wxs'],
  19. };
  21. // 七牛相关配置
  22. const qiniuOptions = {
  23.     ak: 'ac key',
  24.     sk: 'sk key',
  25.     zone: 'Zone_z0', // 空间对应存储区域（华东：z0，华北：z1，华南：z2，北美：na0）
  26.     bucket: 'hynal-com', // 七牛对应空间
  27.     upload: {
  28.         dir: './dist/images', // 上传本地目录
  29.         // prefix: 'test/', // 上传时添加的前缀，可省略
  30.         except: /\.(html|js)$/, // 上传时不上传文件的正则匹配
  31.     },
  32.     remote: {
  33.         url: 'https://*****.com', // 七牛空间域名
  34.         prefix: {
  35.             default: 'test/', // 七牛空间默认前缀，如果下面三个相同可省略
  36.             remove: 'test/', // 七牛空间删除前缀
  37.             prefetch: 'test/', // 七牛空间预取前缀
  38.             refresh: 'test/', // 七牛空间刷新前缀
  39.         },
  40.     },
  41. };
  43. const urlPrefix = {
  44.     prefix: 'https://cdn.liayal.com/dist',
  45.     tags: ['image'],
  46. };
  48. // 路径拼接
  49. function _join(dirname) {
  50.     return Path.join(process.cwd(), 'src', dirname);
  51. }
  53. // 引用路径别名配置
  54. const aliasConfig = {
  55.     '@Libs': _join('libs'),
  56.     '@Utils': _join('utils'),
  57.     '@Components': _join('components'),
  58.     '@Style': _join('style'),
  59.     '@Images': _join('images'),
  60. };
  62. function wxss() {
  63.     return src(path.lessPath, { base: 'src/' })
  64.         .pipe(Alias(aliasConfig))
  65.         .pipe(Less())
  66.         .pipe(UrlPrefixer.css(urlPrefix))
  67.         .pipe(GulpIf(process.env.NODE_ENV === 'production', Csso()))
  68.         .pipe(Rename({
  69.             extname: '.wxss',
  70.         }))
  71.         .pipe(dest('dist'));
  72. }
  74. function js() {
  75.     return src(path.jsPath)
  76.         .pipe(Alias(aliasConfig))
  77.         .pipe(ESLint())
  78.         .pipe(ESLint.format())
  79.         .pipe(dest('dist'));
  80. }
  82. function imagemin() {
  83.     return src(path.images)
  84.         .pipe(ImageMin())
  85.         .pipe(dest('dist/images'));
  86. }
  89. const images = series(imagemin, (cb) => {
  90.     const qiniu = new Qiniu(qiniuOptions);
  91.     qiniu.upload();
  92.     cb();
  93. });
  95. // 针对wxs,wxml,json文件直接复制
  96. function copy() {
  97.     return src(path.copy)
  98.         .pipe(Alias(aliasConfig))
  99.         .pipe(UrlPrefixer.html(urlPrefix))
  100.         .pipe(dest('dist'));
  101. }
  103. function clean() {
  104.     return src('dist/*', { read: false })
  105.         .pipe(Clean());
  106. }
  109. watch(path.lessPath, wxss);
  110. watch(path.jsPath, js);
  111. watch(path.copy, copy);
  112. watch(path.images, images);
  114. exports.default = series(clean, parallel(copy, wxss, js, images));

整个项目我放在github :point_right: gulp-wechat-weapp

写于 2019年02月19日小程序 Gulp 5667

如非特别注明，文章皆为原创。

转载请注明出处： https://www.liayal.com/article/5c6b76a6c0ab13505eeefaaf

记小栈小程序上线啦～搜索【记小栈】或【点击扫码】体验

你不想说点啥么？
😀😃😄😁😆😅😂🤣☺️😊😇🙂🙃😉😌😍😘😗😙😚😋😜😝😛🤑🤗🤓😎🤡🤠😏😒😞😔😟😕🙁☹️😣😖😫😩😤😠😡😶😐😑😯😦😧😮😲😵😳😱😨😰😢😥🤤😭😓😪😴🙄🤔🤥😬🤐🤢🤧😷🤒🤕😈👿👹👺💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾👐👐🏻👐🏼👐🏽👐🏾👐🏿🙌🙌🏻🙌🏼🙌🏽🙌🏾🙌🏿👏👏🏻👏🏼👏🏽👏🏾👏🏿🙏🙏🏻🙏🏼🙏🏽🙏🏾🙏🏿🤝👍👍🏻👍🏼👍🏽👍🏾👍🏿👎👎🏻👎🏼👎🏽👎🏾👎🏿👊👊🏻👊🏼👊🏽👊🏾👊🏿✊✊🏻✊🏼✊🏽✊🏾✊🏿

评论

～ 评论还没有，沙发可以有 O(∩_∩)O~