《Gulp 入门指南》- 前言
2015-04-17 09:49 nimojs 阅读(235) 评论(0) 编辑 收藏 举报gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。
在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
你可以直接访问 GitHub: gulp-book 查看本书
目录
- 安装 Node 和 gulp
- 使用 gulp 压缩 JS
- 使用 gulp 压缩 CSS
- 使用 gulp 压缩图片
- 使用 gulp 编译 LESS
- 使用 gulp 编译 Sass
- 使用 gulp 构建一个项目
将规律转换为 gulp 代码
现有目录结构如下:
└── js/
└── a.js
规律
- 找到 js/目录下的所有 .js 文件
- 压缩这些 js 文件
- 将压缩后的代码另存在 dist/js/ 目录下
编写 gulp 代码
// 压缩 JavaScript 文件
gulp.task('script', function() {
// 1. 找到
gulp.src('js/*.js')
// 2. 压缩
.pipe(uglify())
// 3. 另存
.pipe(gulp.dest('dist/js'));
});
代码执行结果
代码执行后文件结构
└── js/
│ └── a.js
└── dist/
└── js/
└── a.js
a.js 压缩前
function demo (msg) {
alert('--------\r\n' + msg + '\r\n--------')
}
demo('Hi')
a.js 压缩后
function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");
此时 dist/js
目录下的 .js
文件都是压缩后的版本。
你还可以监控 js/
目录下的 js 文件,当某个文件被修改时,自动压缩修改文件。启动 gulp 后就可以让它帮助你自动构建 Web 项目。
gulp 还可以做很多事,例如:
- 压缩CSS
- 压缩图片
- 编译Sass/LESS
- 编译CoffeeScript
- markdown 转换为 html
若作者显示不是Nimo(被转载了),请访问Github原文进行讨论:https://github.com/nimojs/blog/issues/19
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用