WeChat アプレット開発: Gulp 上に構築されたワークフロー

現在、WeChat ミニ プログラムを開発する場合、WeChat ミニ プログラムのネイティブ開発、wepy フレームワークの使用、mpvue フレームワークの使用、および taro フレームワークの使用の 4 つほどの技術ソリューションが利用可能です

今後も更新していきます。ご協力ありがとうございます。

Gulp に基づいて構築された WeChat アプレット開発ワークフロー

適用可能なシナリオ

3 つの開発オプション。それぞれに独自の長所と短所があります。サードパーティのフレームワークを使用して開発する場合は、フレームワークによってもたらされる開発の利便性を享受できますが、WXS モジュール、カスタム コンポーネント、プラグイン などのミニ プログラムの多くの新機能が追加されます。 、などは、サードパーティのフレームワークの対象ではありません。

ネイティブの小さなプログラムの開発モデルはスタイルの点で、スタイラスとsassの記述に慣れている学生には耐えられないでしょう。これを踏まえて、私はを使用することにしました。 gulpそれを構築するための自動化ツール WeChat ミニ プログラムの開発のための基本テンプレートのセット WeChat ミニ プログラムの機能と特性を完全に保持することに基づいて、less を使用してスタイルを記述することもできます。 、画像圧縮を追加しながら、コマンドラインでテンプレートを簡単に作成できるなど、機能が開発されているので、うれしい、うれしい！ less来写样式，同时加入图片压缩，命令行快速创建模板等特性，如此开发，快哉，快哉！

github走起

特性

• 基于gulp+less构建的微信小程序工程项目

• 项目图片自动压缩

• ESLint代码检查

• 使用命令行快速创建page、template和component

Getting Started

0. 开始之前，请确保已经安装node和npm，全局安装gulp-cli

$ npm install --global gulp-cli

1. 下载代码

$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git

2. 进目录，安装依赖

$ cd wx-miniprogram-boilerplate && npm install

3. 编译代码，生成dist目录，使用开发者工具打开dist目录

$ npm run dev

4. 新建page、template或者component

gulp auto -p mypage           创建名为mypage的page文件
gulp auto -t mytpl            创建名为mytpl的template文件
gulp auto -c mycomponent      创建名为mycomponent的component文件
gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

5. 上传代码前编译

$ npm run build

6. 上传代码，审核，发版

工程结构

wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src
│    ├── components // 微信小程序自定义组件
│    ├── images     // 页面中的图片和icon
│    ├── pages      // 小程序page文件
│    ├── styles     // ui框架，公共样式
│    ├── template   // 模板
│    ├── utils      // 公共js文件
│    ├── app.js
│    ├── app.json
│    ├── app.less
│    ├── project.config.json // 项目配置文件
│    └── api.config.js       // 项目api接口配置
├── .gitignore
├── .eslintrc.js               // ESLint
├── package-lock.json
├── package.json
└── README.md

Gulp说明

Tasks:
  dev              开发编译，同时监听文件变化
  build            整体编译

  clean            清空产出目录
  wxml             编译wxml文件（仅仅copy）
  js               编译js文件，同时进行ESLint语法检查
  json             编译json文件（仅仅copy）
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化

  auto             自动根据模板创建page,template或者component(小程序自定义组件)

gulp auto

选项：
  -s, --src        copy的模板                     [字符串] [默认值: "_template"]
  -p, --page       生成的page名称                                       [字符串]
  -t, --template   生成的template名称                                   [字符串]
  -c, --component  生成的component名称                                  [字符串]
  --msg            显示帮助信息                                           [布尔]

示例：
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

Q&A

Q: 为什么工作流中没有加入js转换，样式补全以及代码压缩？
A: 微信开发者工具中自带babel将ES6转ES5,样式补全以及js代码压缩等功能，在此工作流中不做额外添加。

Q: _template目录的文件有什么用？
A: 使用gulp auto命令自动生成文件，-s参数可以指定copy的对象，默认情况下是以对应目录下文件夹为_template中的文件为copy对象的。开发者可以根据业务需求，自定义_template下的文件。

Q: _template目录的文件是否会被编译到dist
githubスタート機能

gulp+lessに基づいて構築されたWeChatアプレットエンジニアリングプロジェクト
プロジェクト画像の自動圧縮
ESLintコードインスペクション
を素早く使用コマンドラインから page、template、component を作成します
はじめに

0.ノードと npm をインストールし、gulp-cli をグローバルにインストールします。

rrreee

1. コードをダウンロードします。

rrreee

2. ディレクトリに入り、依存関係をインストールします。

rrreee

3コードをコンパイルし、dist ディレクトリを生成します。開発者ツールを使用して dist ディレクトリを開きます。

rrreee

4. コードをアップロードする前に、新しいページ、テンプレート、またはコンポーネントを作成します。

rrreee

6. コードのアップロード、レビュー、リリース

プロジェクトの構造

rrreee

Gulp の説明rrreee

Q&A

Q:

js 変換、スタイル補完はなぜ行われるのかコード圧縮はワークフローに追加されていませんか? A:

WeChat 開発者ツールには、ES6 から ES5 への Babel 変換、スタイル補完、JS コード圧縮などの機能が付属しており、このワークフローでは追加の追加は必要ありません。

Q:🎜 _template ディレクトリ内のファイルは何に使用されますか? 🎜🎜A:🎜 ファイルを自動的に生成するには、gulp auto コマンドを使用します。-s パラメーターは、デフォルトでは、対応するディレクトリ内のフォルダーを指定できます。 code> _template 内のファイルはコピー オブジェクトです。開発者は、ビジネス ニーズに応じて _template 内のファイルをカスタマイズできます。 🎜🎜🎜Q:🎜 _template ディレクトリ内のファイルは dist ディレクトリにコンパイルされますか? 🎜🎜A:🎜いいえ。 🎜🎜TODO🎜🎜🎜🎜[x] コードコメント🎜🎜🎜🎜[x] 標準的なコマンドラインの使い方🎜🎜🎜🎜[x] eslint🎜🎜🎜🎜[ ] weuiなどのよく使われるCSSライブラリを紹介します🎜 🎜 🎜🎜関連する推奨事項: 🎜🎜🎜 WeChat ミニ プログラム開発の実践的なチュートリアル - WeChat ミニ プログラムの開発と実行🎜🎜🎜🎜 WeChat ミニ プログラム開発🎜🎜🎜🎜ビデオ: WeChat ミニ プログラムの開発に関するビデオ チュートリアル🎜🎜

以上がWeChat アプレット開発: Gulp 上に構築されたワークフローの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。