声明 本教程整理于互联网
# 一、gulp 入门简介
gulp 是基于 node 实现Web 前端自动化开发的工具，利用它能够极大的提高开发效率。
在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
-
将规律转换为
gulp代码 -
现有目录结构如下：
└── js/
└── a.js
@前端进阶之旅: 代码已经复制到剪贴板
# 1.1 规律
- 找到
js/目录下的所有 .js文件 - 压缩这些
js文件 - 将压缩后的代码另存在
dist/js/目录下
# 1.2 编写 gulp 代码
// 压缩 JavaScript 文件
gulp.task('script', function() {
// 1. 找到
gulp.src('js/*.js')
// 2. 压缩
.pipe(uglify())
// 3. 另存
.pipe(gulp.dest('dist/js'));
});
@前端进阶之旅: 代码已经复制到剪贴板
# 1.3 代码执行结果
代码执行后文件结构
└── 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");
