The current repo belongs to Closed status, and some functions are restricted. For details, please refer to the description of repo status
8 Star 31 Fork 19

浙江易网科技股份有限公司 / gulp-automation
Closed

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

gulp-automation

利用 Gulp 配置的前端项目自动化工作流,实现 css js html 代码和图片一键压缩、发布、打包、上线。


使用

本项目基于 Gulp 4.x 运行,如果你以前全局安装过 gulp ,需要先运行 npm rm --global gulp 删除旧版本 gulp ,再运行 npm install --global gulp-cli 安装最新版本。

方法 1

适用于初学者快速上手,项目里包含演示文件,方便学习

拉取该项目到本地,修改 package.json 文件里的 name 参数为项目名,然后依次运行:

npm install
gulp

访问 http://localhost:3000 即可看到页面。

方法 2

适用于熟练使用的老手,项目里无演代码,方便开发工作

使用易网项目手脚架 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 实现

功能模块

IDE(编辑器)

推荐使用 VS Code ,并安装以下扩展:

相关阅读

Empty file

About

利用 Gulp 配置的前端自动化工作流 expand collapse
JavaScript and 3 more languages
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/eoner/gulp-automation.git
git@gitee.com:eoner/gulp-automation.git
eoner
gulp-automation
gulp-automation
master

Search