현재 위챗 미니 프로그램을 개발할 때 사용할 수 있는 기술적 솔루션은 위챗 미니 프로그램 자체 개발, wepy 프레임워크 사용, mpvue 프레임워크 사용, taro 프레임워크 사용
지속적으로 업데이트할 예정이며, 귀하의 지원에 감사드립니다.
Gulp를 기반으로 구축된 WeChat 애플릿 개발 워크플로
세 가지 개발 옵션은 각각 장점과 단점이 있습니다. 타사 프레임워크를 사용하여 개발하는 경우 프레임워크가 제공하는 개발 편의성을 누릴 수 있습니다. 그러나 WXS 모듈, 맞춤 구성 요소 및 플러그인과 같은 미니 프로그램의 많은 새로운 기능과 기능이 제공됩니다. 등은 타사 프레임워크의 적용을 받지 않습니다.
네이티브 소규모 프로그램의 개발 모델은 너무 단순합니다. 스타일 면에서 stylus, sass를 쓰는 데 익숙한 학생들은 wxss의 쓰기 방법을 용납하지 않을 것입니다. gulp자동화 도구 WeChat 미니 프로그램 개발을 위한 기본 템플릿 세트입니다. WeChat 미니 프로그램의 기능과 특성을 완벽하게 유지하면서 less를 사용하여 스타일을 작성할 수도 있습니다. , 이미지 압축 추가, 명령줄 빠른 템플릿 생성 등의 기능이 개발되어 행복하고 행복합니다! less来写样式，同时加入图片压缩，命令行快速创建模板等特性，如此开发，快哉，快哉！
github走起
基于gulp+less构建的微信小程序工程项目
项目图片自动压缩
ESLint代码检查
使用命令行快速创建page、template和component
$ npm install --global gulp-cli
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
$ cd wx-miniprogram-boilerplate && npm install
$ npm run dev
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的页面
$ npm run build
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
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: 为什么工作流中没有加入js转换，样式补全以及代码压缩？
A: 微信开发者工具中自带babel将ES6转ES5,样式补全以及js代码压缩等功能，在此工作流中不做额外添加。
Q: _template目录的文件有什么用？
A: 使用gulp auto命令自动生成文件，-s参数可以指定copy的对象，默认情况下是以对应目录下文件夹为_template中的文件为copy对象的。开发者可以根据业务需求，自定义_template下的文件。
Q: _template目录的文件是否会被编译到dist
github startFeatures
gulp+less페이지, 템플릿 및 컴포넌트 만들기프로젝트 구조
rrreeeGulp 설명rrreeeQ&A
왜 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
