WeApp Workflow
1.0.0
WeApp-Workflow: Gulp に基づく WeChat アプレット フロントエンド開発ワークフロー
WeApp-Workflow は、WeChat ミニ プログラムの開発のために特別に作成されたフロントエンド開発ワークフローであり、Gulp 4 に基づいて開発されており、ワークフローを通じて WeChat ミニ プログラムの開発プロセスにおけるフロントエンド コードの作成の問題点を解決することを目的としています。 。
プロジェクトのホームページ: https://github.com/Jeff2Ma/WeApp-Workflow
記事紹介：https://devework.com/weapp-workflow.html
Sass プリプロセッサを使用すると、CSS の記述がスムーズになります。 .scssファイルは、WeChat アプレットでサポートされる.wxssファイルにリアルタイムでコンパイルされます。
公式に推奨されているiPhone 6を標準デザイン形式としており、開発時に直接px記述することで自動でrpxに変換できます。
// Input: src/pages/index/index.scss
. index__header {
font-size : 14 px ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}
// Output: dist/pages/index/index.wxss
. index__header {
font-size : 28 rpx ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}画像をリアルタイムで圧縮し、増分方式を使用して圧縮の繰り返しを防ぎます。
アプレットは相対パスを使用した画像参照をサポートせず、 httpsプロトコル ヘッダーを使用した絶対パスのみをサポートします。このワークフローでは、WXML および WXSS ファイルで参照されている相対パス イメージをクラウド ストレージ CDN にアップロードしたり、FTP/SFTP プロトコルを通じて個人サーバー スペースにアップロードしたりできます。現在、Tencent Cloud と Qiniu Cloud をサポートしています。
// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >
// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >アプレットは、相対パスを持つフォント ファイルをサポートしていません。このワークフローでは、CSS で参照されるフォント ファイルを Base64 にトランスコードして、元のパスを置き換えることができます。
// Input: src/pages/index/index.scss
@font-face {
font-family: 'fontello';
src: url("assets/fonts/fontello.ttf") format('truetype');
}
// Output: dist/pages/index/index.wxss
@font-face {
font-family: 'fontello';
src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}
この機能は、postcss-lazysprite プラグインによって駆動されます。開発時に画像を用意した後、 @lazysprite "xxxx"のようなコードを記述するだけで、自動的にスプライト画像が構築され、対応する CSS が生成されます。
// Input: src/app.scss
@lazysprite "filetype" ;
/ / Output : d is t / app. wxss
. icon-filetype-doc {
background-image : url(.. / sprites/filetype.png);
background-position : 0 0 ;
width : 80 px ;
height : 80 px ;
}
. icon-filetype-pdf {
background-image : url(.. / sprites/filetype.png);
background-position : -90 px 0 ;
width : 80 px ;
height : 80 px ;
}
@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
. icon-filetype-doc {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : 0 0 ;
background-size : 170 px 170 px ;
}
. icon-filetype-pdf {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : -90 px 0 ;
background-size : 170 px 170 px ;
}
}最新の Gulp 4 バージョンの新機能を使用して、ワークフローの実行を高速化します。
コアにはデフォルト タスクが 1 つだけあり、合理的なタスク マッチング メカニズムにより、煩雑なプロセスとターミナルの往復実行が軽減され、開発がより便利になります。
ワークフローの実行を高速化するために、Sass の増分コンパイルとイメージ関連タスクの増分更新メカニズムを導入します。
.
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│ ├── app.js
│ ├── app.json
│ ├── app.scss
│ ├── assets // 开发相关的静态文件原始资源
│ │ ├── fonts //字体文件
│ │ ├── images // 图片文件，可被上传到CDN
│ │ ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│ │ └── sprites // 生成雪碧图小图的目录
│ ├── image // 小程序专用的图片资源（如tabbar icon）目录
│ ├── pages
│ └── utils
├── tmp // 通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录
ノードのバージョンは v4 以降であることが推奨されます。このワークフローにはサードパーティの依存関係が含まれるため、科学的なインターネット環境で操作することをお勧めします。
0. まずは Gulp-cli をグローバルにフォローしてください。
npm install gulp-cli -g
1. git cloneを通じてプロジェクト ファイルをダウンロードします。
git clone https://github.com/Jeff2Ma/WeApp-Workflow
2. .gitディレクトリを削除することをお勧めします (Windows ユーザーは手動で削除してください)。
cd WeApp-Workflow
rm -rf .git
3. 必要なモジュールをインストールする
npm i
4. 開発を開始する
config.jsコピーしてconfig.custom.jsに名前を変更し、実際のニーズに応じて関連する構成情報を書き換えることをお勧めします (各構成項目にはコメントが付いています)。次に、ターミナルで次のコマンドを実行して有効にします。
gulp
残りのタスク: gulp clean : dist 、 tmpフォルダーをクリアします。
上記の操作が完了したら、「WeChat Web 開発者ツール」(v1.x ベース。v0.x との互換性はありません) で関連する設定を行う必要があります。
1. 新しいプロジェクトを作成し、プロジェクト ディレクトリ全体、つまりproject.config.jsonが配置されているディレクトリをプロジェクト ディレクトリとして直接選択します。
次に、通常の開発に入ることができます。開発プロセス中に、サードパーティのエディター (WebStorm、Sublime Text など) を使用してsrcディレクトリ内のファイルを編集し、変更を保存した後、gulp プロセスがそれらをdist対応する場所にリアルタイムでコンパイルします。ディレクトリ。 WeChat Web 開発者ツールは自動的にコンパイルおよび更新され、現時点ではプレビュー機能としてのみ機能します。
開発のキーポイント:
SCSS 開発: src/pages/page-nameの直下にあるpage-name.scssを編集すると、自動的にpage-name.wxssに変換され、 distディレクトリの対応する場所に配置されます。数値が関与する開発プロセスでは、 px単位（標準設計案としてiPhone6に準拠）を直接記述すると、自動的に計算されrpx単位に変換されます。特別な状況で変換したくない場合は、 PX大文字で記入してください。
WXML 開発: CDN イメージ関数には特別なイメージ パスを記述する必要があることを除いて、特別な要件はありません。
WebFont : まず fontell.com などの Web サイトでスプライト画像を作成し、 ttf 形式のファイルをsrc/assets/fontsに取得します。その後、通常の方法で引用することで自動的に Base64 トランスコードできます。
CDN 画像: (この機能はデフォルトでオフになっており、設定でオンにする必要があります。) WeChat アプレットの wxss または wxml は相対パスを持つ画像をサポートしておらず、https で始まる絶対パスが必要です。このワークフローを使用すると、開発中に相対パスを直接記述することができ、このワークフローは CDN へのアップロードと元のパスの置き換えに役立ちます。このようなイメージはsrc/assets/imagesの下に配置し、 %ASSETS_IMG%/filename.pngを使用して wxml または CSS にパスを記述する必要があります。 %ASSETS_IMG%は、後続の文字列置換用にカスタマイズされたディレクトリです。
スプライト画像: まず、小さなプログラムでスプライト画像を使用することはお勧めできません。単一の画像または WebFont を直接使用することをお勧めします。これを使用する必要がある場合は、コード内の小さなプログラムの例に従って、小さなピクチャ ディレクトリをsrc/assets/spritesの下に配置し、SCSS の@lazysprite "xxxx"を通じて呼び出します (呼び出しコードをapp.scss )。スプライト画像の高度な使い方については、ここをクリックしてください。
Q: ワークフローに AutoPrefixer 機能がないのはなぜですか?
A: WeChat 開発者ツールの「プロジェクト」の「スタイル補完」オプションがすでにこの機能を提供しているためです。
Q: ワークフローに babel の ES6 から ES5 への変換機能が設定されていないのはなぜですか?
A: 上記の通り、WeChat 開発者ツールが提供されています。
Q: WePY などの小規模なプログラム開発フレームワークと比較した利点は何ですか?
A: WeChat 決済チームが開発した WePY は確かに優れたツールです。 WePYと同じレベルで比較した場合、WeApp-Workflowには何のメリットもありません。 WeApp-Workflow はワークフロー ツールであり、開発フレームワークではありません。一部の開発者にとって、小規模なプログラムには WePY ほど重い開発フレームワークは必要ありません。
Q: WeApp-Workflow には、対応する特別なコンパイル タスク ( gulp build 、 npm run buildと同様) はありませんか?
A: はい、WeApp-Workflow は複雑な小さなプログラムではなく、「小さな」小さなプログラムの開発に適しているため、開発速度やコード量などを考慮して、特別な開発ステージはなく、開発タスクは 1 つだけです。追加のコンパイル タスク (buid) が完了フェーズ中に追加されます。タスクは 1 つだけです。
これらの小規模プログラムは、開発ワークフローとして WeApp-Workflow を使用します (ケースを追加するには PR を送信してください)。
tmt-ワークフロー
QMUI_Web
postcss-lazysprite
gulp-qcloud-アップロード
単体テストを追加する
ES6 リライト
FTP/SFTPサーバーへアップロード機能
Qiniu クラウド ストレージをサポートする CDN
フィードバックや機能に関する提案がある場合は、問題を作成するか、プル リクエストを送信してください。サポートと貢献に感謝します。
