gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。
在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
因为 Node 的全局包安装都是在C盘,所有请在C盘使用 gulp 以方便熟悉 gulp
现有目录结构如下:
└── js/ |
└── a.js |
// 压缩 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 |
function demo (msg) { |
alert('--------\r\n' + msg + '\r\n--------') |
} |
demo('Hi') |
function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi"); |
此时 dist/js
目录下的 .js
文件都是压缩后的版本。
你还可以监控 js/
目录下的 js 文件,当某个文件被修改时,自动压缩修改文件。启动 gulp 后就可以让它帮助你自动构建 Web 项目。
gulp 还可以做很多事,例如: