gulp的安装以及使用

一、什么是gulp？

gulp是基于node平台开发的前端构建工具。 gulp是一个JavaScript程序，并且它的指令使用的也是JavaScript语言，所以gulp通常是前端开发人员自动 化处理日常任务的首选工具。

二、gulp的作用

• gulp可以处理日常工作流产生的任务
• 项目上线时对HTML、CSS、JavaScript文件合并、压缩。
• 将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行。
• gulp允许开发者将机械化的操作编写成任务，在命令行输入相关的任务名称就能执行机械化操作，从而 提高开发效率。(用机器代替手工，提高开发效率)

三、gulp提供的方法

gulp.src()：获取任务要处理的文件

• 语法：gulp.src(globs)
• 参数：globs参数是读取文件的筛选条件，可以写入字符串，也可以是数组，数组含有多个读取条件
• 匹配条件：​ 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾

示例：

• gulp.src(“js/a.js”) 读取一个文件
• gulp.src([“js/a.js”,“js/b.js”]) 读取两个文件
• gulp.src(“js/*.js”) js文件夹下所有的js文件

匹配条件：

​ **	匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。也就是能匹配某个目录下所有文件包括其子目录下的所有内容
?	匹配括号中给定的任一模式0次或1次
​ […]	匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个
​ !	匹配任何与括号中给定的任一模式都不匹配的
+	匹配括号中给定的任一模式至少1次
@	匹配括号中给定的任一模式1次

gulp.dest()：输出文件

• 语法：gulp.dest(path)
• 注释：给文件写入数据流，gulp.dest()把文件流写入文件后，文件流仍然可以继续使用
• 参数：path参数是要写入文件存放的路径

示例：

gulp.task("init",function () {
    gulp.src("./js/*.js").pipe(gulp.dest("./dist/"))
});

gulp.task()：建立gulp任务

• 语法：gulp.task(任务名,任务所依赖前面任务名的数组,任务执行的函数);
• 注释：如果需要有多个任务操作时就需要定义任务

//​ 如果执行 gulp two 这时候就会先执行任务one，再执行任务two
gulp.task("one",function () {
    console.log("one");
});
gulp.task("two",["one"],function () {
    console.log("two")
});

gulp.watch()：监控文件的变化

• 语法：gulp.watch(“监视的文件”,[监视文件发生变化后需要执行任务名的数组])
• 注释：监视文件变化