• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

gulp-automation: 利用 Gulp 配置的前端自动化工作流

原作者: [db:作者] 来自: 网络 收藏 邀请

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 installgulp

访问 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 ,并安装以下扩展:

相关阅读


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
lessc: Less 即时保存编译 CSS 插件 for Sublime Text 3发布时间:2022-02-13
下一篇:
XUnityDeploy: Unity 自动化编译IOS | Android项目发布时间:2022-02-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap