WeChat 애플릿 개발: Gulp를 기반으로 구축된 워크플로

현재 위챗 미니 프로그램을 개발할 때 사용할 수 있는 기술적 솔루션은 위챗 미니 프로그램 자체 개발, wepy 프레임워크 사용, mpvue 프레임워크 사용, taro 프레임워크 사용

지속적으로 업데이트할 예정이며, 귀하의 지원에 감사드립니다.

Gulp를 기반으로 구축된 WeChat 애플릿 개발 워크플로

적용 가능한 시나리오

세 가지 개발 옵션은 각각 장점과 단점이 있습니다. 타사 프레임워크를 사용하여 개발하는 경우 프레임워크가 제공하는 개발 편의성을 누릴 수 있습니다. 그러나 WXS 모듈, 맞춤 구성 요소 및 플러그인과 같은 미니 프로그램의 많은 새로운 기능과 기능이 제공됩니다. 등은 타사 프레임워크의 적용을 받지 않습니다.

네이티브 소규모 프로그램의 개발 모델은 너무 단순합니다. 스타일 면에서 stylus, sass를 쓰는 데 익숙한 학생들은 wxss의 쓰기 방법을 용납하지 않을 것입니다. 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 startFeatures

gulp+less
프로젝트 이미지 자동 압축
ESLint 코드 검사
를 기반으로 구축된 WeChat 애플릿 엔지니어링 프로젝트 빠르게 사용 명령줄에서 페이지, 템플릿 및 컴포넌트 만들기
시작하기

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 매개변수는 복사 개체를 지정할 수 있습니다. 기본적으로 해당 디렉터리의 폴더는 _template의 파일은 복사 개체입니다. 개발자는 비즈니스 요구에 따라 _template 아래의 파일을 사용자 정의할 수 있습니다. 🎜🎜🎜Q:🎜 _template 디렉터리의 파일이 dist 디렉터리로 컴파일되나요? 🎜🎜A:🎜 아니요. 🎜🎜TODO🎜🎜🎜🎜[x] 코드 주석🎜🎜🎜🎜[x] 표준 명령줄 사용법🎜🎜🎜🎜[x] eslint🎜🎜🎜🎜[ ] weui 등 일반적으로 사용되는 CSS 라이브러리 소개🎜 🎜 🎜🎜관련 권장 사항: 🎜🎜🎜 WeChat Mini 프로그램 개발에 대한 실용 튜토리얼 - WeChat Mini 프로그램 개발 및 실행🎜🎜🎜🎜WeChat Mini 프로그램 개발🎜🎜🎜🎜동영상: WeChat Mini 프로그램 개발에 대한 동영상 튜토리얼🎜🎜

위 내용은 WeChat 애플릿 개발: Gulp를 기반으로 구축된 워크플로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!