导航：首页 > 开发技术 >

在Gulp基础上怎么构建微信小程序

发表于：2026-11-02 作者：千家信息网编辑

千家信息网最后更新 2026年11月02日，这篇文章主要讲解了"在Gulp基础上怎么构建微信小程序"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"在Gulp基础上怎么构建微信小程序"吧！适用场景三

千家信息网最后更新 2026年11月02日在Gulp基础上怎么构建微信小程序

这篇文章主要讲解了"在Gulp基础上怎么构建微信小程序"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"在Gulp基础上怎么构建微信小程序"吧！

适用场景

三种开发方案，各有优劣。使用第三方框架开发，可以享受框架带来的开发便利，但对于小程序新增的诸多特性和功能，比如WXS模块、自定义组件和插件等，受制于第三方框架，无法使用。

而原生小程序的开发模式，又过于简陋，就样式来说，写惯了less，stylus和sass的同学一定无法忍受wxss的这种写法，基于此，决定使用gulp自动化工具来构建一套微信小程序开发的基础模板，在完全保留微信小程序功能和特性的基础上，又可以的使用less来写样式，同时加入图片压缩，命令行快速创建模板等特性，如此开发，快哉，快哉！

特性

基于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的页面