Tmt Workflow

screenshot of Tmt Workflow

A web developer workflow used by WeChat team based on Gulp, with cross-platform supported and solutions prepared.

Overview:

The project migration instructions state that due to business adjustments, the project will no longer be updated, and future requirements will be merged into the Feflow project for development and iteration. The project, which is a frontend workflow based on Gulp, efficient, cross-platform (macOS & Win), and customizable, has now introduced a GUI desktop tool: WeFlow, which can be used without installing any environment dependencies.

Features:

  • Automation Process: Handles Less/Sass to CSS conversion, CSS autoprefixer, image CSS property generation, SVG inline to CSS, CSS minification, CSS sprite synthesis, Retina image generation, image compression, JS merging and minification, and more.
  • Development Tasks: Includes tasks for building development files, compiling EJS to HTML and Less to CSS, and automatically refreshes the browser on file changes.
  • Production Tasks: Involves tasks for generating final files, compiling and compressing CSS/JS/IMG, creating CSS sprites, inline SVG compression, packaging and merging files, and supporting WebP images.
  • FTP Deployment: Facilitates uploading the production files to an FTP server specified in the configuration.
  • Packaging Task: Allows compressing the "dist" directory generated by the production task into a zip file.
  • Customization and Extension: Enables users to customize tasks, load mechanisms dynamically, create custom tasks and plugins to meet specific team requirements.

Summary:

gulp
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.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.