自动化构建工具gulp的基础了解

最新推荐文章于 2025-08-21 18:01:40 发布

转载最新推荐文章于 2025-08-21 18:01:40 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/GainLoss/p/5776765.html

文章标签：

#json

本文介绍Gulp自动化工具的基本使用方法，包括安装步骤、基本语法示例及如何运行Gulp任务。通过本文，读者可以快速了解Gulp的工作原理及其与Grunt的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用gulp的步骤

1.安装node
检测是否安装好 cmd->node -v
2.安装gulp 可以在npm或者在cnpm
3.在node里面有个文件package.json.利用命令行npm init
4.本地安装插件，在这个文件夹中，直接在npm下载下来
5.在文件夹中新建一个gulpfile.js(名字必须是这个)，其他的代码都是写在这个xxx.js的文件中的

2.基本语法
gulp.task("defult",function(){
       return gulp.src(源文件夹)
       .pipe(插件名称（）)
       .pipe(插件名称（）)
       .pipe(gulp.dest(目标文件夹))
   });
   gulp.task("min",function(){
       return gulp.src(源文件夹)
       .pipe(插件名称（）)
       .pipe(插件名称（）)
       .pipe(gulp.dest(目标文件夹))
});

//gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

gulp的基础语法
1.gulp.task('任务名称'，‘依赖任务’，函数)；
注意：依赖任务并行执行，然后运行任务名称
2.gulp.src()
3.gulp.dest()
4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是监视文件的变化，然后运行指定的Tasks或者函数，

3.运行gulp
gulp 任务名称

4.为什么采用gulp
gulp和grunt的区别
gulp 基于流配置优先 1000+插件
grunt 基于文件代码优先 3900+插件
这个相比Grunt需要使用插件，gulp本身就支持的很好。

其他的就是练习就成了！！！

转载于:https://www.cnblogs.com/GainLoss/p/5776765.html