gulp的基本使用 🚀
✨ 前言
在前端开发中，任务自动化工具是提高效率的重要帮手，而 `gulp` 就是其中的一员猛将！它基于流式处理和代码插件化设计，能够轻松完成文件压缩、合并、监听等任务。今天就来聊聊如何快速上手 `gulp` 吧！
🛠️ 安装与初始化
首先，你需要确保电脑上已安装 Node.js 和 npm。接着，在项目根目录下运行以下命令：
```bash
npm init -y 初始化 package.json 文件
npm install --save-dev gulp 安装 gulp
```
完成后，在项目根目录创建一个 `gulpfile.js` 文件，这就是你的配置中心啦！
🔧 基本任务编写
比如，我们想将 `src/css/.css` 中的所有样式文件合并并压缩到 `dist/css/` 文件夹里。可以这样写：
```javascript
const { src, dest, watch } = require('gulp');
const cleanCSS = require('gulp-clean-css');
function css() {
return src('src/css/.css') // 源文件路径
.pipe(cleanCSS()) // 压缩 CSS
.pipe(dest('dist/css'));// 输出目标路径
}
exports.css = css;// 导出任务
```
👀 监听与执行
为了让开发更高效，你可以让 `gulp` 自动检测文件变化并重新执行任务。只需添加一行代码：
```javascript
watch('src/css/.css', css);
```
然后运行 `gulp` 即可启动监听模式！🔥
🎉 总结
通过以上步骤，你已经掌握了 `gulp` 的基础用法。无论是日常开发还是团队协作，它都能帮你节省大量时间。快去试试吧，让代码变得更整洁、更高效！💪
版权声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
