WeApp Workflow
基于Gulp 的微信小程序前端开发工作流
Overview:
WeApp-Workflow is an innovative front-end development workflow specifically designed for WeChat Mini Programs, crafted using Gulp 4. Its primary aim is to alleviate the pain points encountered during the development of front-end code for WeChat Mini Programs by streamlining the process through a robust workflow. Tailored for developers familiar with the WeChat ecosystem, this tool promises to enhance efficiency while providing all the necessary capabilities to manage and compile assets effectively.
The workflow boasts a set of features that facilitate rapid development, automatic compilation, and resource management, making it a compelling choice for developers seeking a structured yet flexible environment to build their applications.
Features:
- Real-Time SCSS Compilation: Utilizes Sass preprocessor to convert .scss files into wxss files on the fly, allowing for a smoother CSS writing experience.
- Automatic Unit Conversion: Automatically converts px units into rpx, using iPhone 6 as the standard, simplifying the design process for developers.
- Image Compression: Compresses images in real-time using an incremental method to prevent redundant compression, optimizing loading times effectively.
- Image Upload to CDN: Automatically uploads images to cloud storage or personal servers via FTP/SFTP, replacing paths to support HTTPS requirements for WeChat.
- Base64 Encoding for Fonts: Converts font files referenced in CSS to base64 encoding, ensuring compatibility with the WeChat environment that doesn't support relative paths for fonts.
- Automated Sprite Generation: Automatically constructs sprite sheets and corresponding CSS with minimal code, streamlining image management.
- Incremental Updates: Implements an efficient incremental update mechanism for Sass compilation and image tasks, making the workflow faster and more efficient.
- Gulp 4 Integration: Leverages the latest features in Gulp 4 to improve workflow speed and responsiveness, making development smoother and more efficient.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Gulp
Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.