Gulp4 工作流配置(Gulp4 workflow config)
简介 - Introduction
简单实用的前端自动化工作流配置，基于 Gulp4.x Simple and practical front-end automated workflow configuration based on Gulp4.x
特性 - Features
- SASS (CSS preprocessor)
- 图像压缩和转Base64 (Images compress & save base64 image)
- JS压缩 (JavaScript compressor)
- 热加载 (Hot reload)
- 一套环境多项目共存 (Multi-Project Builds)
- ES6转换 (Babel)
- 自动添加CSS前缀 (Autoprefixer)
- 移动端适配方案 (Pixels / Rem / Viewport)
- 反向代理（HTTP proxy）
- Webpack打包（Webpack）
目录结构 - Directory structure
+ project_file_name // Project folder(Example)
+ Build // Production folder(Output floder)
- etc...
+ dist // Pevelopment folder(Output floder)
- etc...
+ dist__test // Test folder(Output floder)
- etc...
+ src // Source code
- images // Image folder
- js // Script folder
- lib // CSS/JS library
- scss // Style folder
- project.config.js // Project custom config
- .gitignore // Exclude files from git
- gulp.env.js // Gulp environmental config
- gulp.config.js // Gulp custom config
- gulpfile.js // Gulp config
- package.json // Dependency & Module list
- README.md // Documentation
- webpack.config.js // Webpack config
- yarn.lock // Yarn
环境要求 - Pre Required
如果你已经全局安装了 gulp 请先删除旧版本后再安装
If you've previously installed gulp globally, please remove the old version
$ npm rm --global gulp# or $ yarn global remove gulp全局安装 gulp-cli
Install the gulp command line utility
$ npm install --global gulp-cli# or $ yarn global add gulp-cli安装方式 - Installation
# 安装 - Using npm or yarn $ npm i ublue-gulp-config# or $ yarn add ublue-gulp-config # 安装依赖 - Install dependency $ npm install# or $ yarn install使用方法 - Used
# 项目初始化 - Project initialization $ gulp init # 环境启动 - Start it $ gulp环境切换 - Using environment variables
# 发布测试环境 - Build for test environment $ gulp init --test # 发布生产环境 - Build for production environment $ gulp init --build # 清理生产目录 - Clean up development or production $ gulp clean # 清理指定环境目录 - Clean up the specified environment directory $ gulp clean --test开源许可(License)
更新日志(Release History)
2020-03-11
v1.1.3 - fix NPM config
v1.1.2 - update imagemin-pngquant 插件
2019-11-1
v1.1.1 - fix NPM config
2019-10-31
v1.1.0 - 个别插件过旧，处于安全因素进行替换，并重构部分代码
2019-03-11
v1.0.1 - 添加示例 - 查看该版本存档
2019-03-10
v1.0.0 - 初始发布