利用 Gulp 配置的前端项目自动化工作流,实现 css js html 代码和图片一键压缩、发布、打包、上线。
本项目基于 Gulp 4.x 运行,如果你以前全局安装过 gulp ,需要先运行
npm rm --global gulp
删除旧版本 gulp ,再运行npm install --global gulp-cli
安装最新版本。
适用于初学者快速上手,项目里包含演示文件,方便学习
拉取该项目到本地,修改 package.json
文件里的 name
参数为项目名,然后依次运行:
npm install
gulp
访问 http://localhost:3000
即可看到页面。
适用于熟练使用的老手,项目里无演代码,方便开发工作
使用易网项目手脚架 1one-project 进行项目初始化,随后运行:
$ gulp
访问 http://localhost:3000
即可看到页面。
gulp
gulp build
tinypng 的压缩效果比 imagemin 更显著 如果使用 tinypng 进行图片压缩,请确保打包时网络畅通
gulp-automation
├─ build 发布目录,发布时会将 css js html 文件进行压缩,并存放于此
├─ build-zip 打包目录,每次发布都会生成一个 zip 压缩包存放于此
├─ page 静态页面
│ └─ include 公用页面
├─ static 资源文件
│ ├─ css css 文件,通过 sass 自动生成
│ ├─ image 图片文件
│ │ └─ sprite 精灵图存放目录
│ ├─ js js 文件,通过 sourcejs 自动生成
│ ├─ plugin plugin 文件,存放 js 或 css 的插件和框架
│ ├─ sass sass 源文件
│ ├─ sourcejs js 源文件
│ └─ template template 文件,存放 js 模版文件
├─ config.json 项目配置文件
├─ gulpfile.js gulp 配置文件
└─ package.json npm 配置文件
config.json
将业务代码里,会因为环境不同而变化的数据进行统一配置,常见的有网站标题、接口地址等。
默认配置提供了两套环境,分别为开发环境和生产环境,可根据业务需求自行增加,例如增加测试环境。
"development": { // 名称,唯一
"name": "开发环境", // 名称,用于图形化界面的展示
"data": { // 需要用到的数据
"title": "开发",
"api": "https://api.douban.com/v2/",
"local": true
}
}
该功能基于 gulp-preprocess 实现
推荐使用 VS Code ,并安装以下扩展:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
Activity
Community
Health
Trend
Influence
:Code submit frequency
:React/respond to issue & PR etc.
:Well-balanced team members and collaboration
:Recent popularity of project
:Star counts, download counts etc.