一、什么是gulp?
gulp是一种比较受欢迎的前端自动化构建工具,它基于Nodejs流,可协助开发人员进行任务管理,减少IO操作。详细了解gulp可访问中文官方网址: https://www.gulpjs.com.cn/
二、自动化与工程化
要想弄清为什么要使用gulp,我们还是要先为大家介绍一下自动化和工程化的概念:
前端自动化:借助于某些工具,监听用户操作,完成自动编译(sass,less),自动合并(css,js),自动刷新、部署、同步等操作。它可以提高开发效率,避免开发人员进行某些重复、繁琐的工作。
前端工程化:直接给出美团团队给出的定义 – 前端工程化是根据具体的业务特点,将前端的开发流程、技术、工具、经验等规范化、标准化。它的目的是让前端开发能够“自成体系”,最大程度地提高前端工程师的开发效率,降低技术选型、前后端联调等带来的协调沟通成本。
有些人习惯将自动化和工程化统称为一个概念,我认为是有失偏颇的。工程化是一个比自动化更为泛化的概念,它强调的是团队合作,规范和前端独立。自动化更加侧重的是简化操作,项目管理。
在了解了什么是自动化和工程化以后,或许我们现在可以给gulp一个更为具体的定义,gulp就是一种前端自动化工具。当然,考虑到其众多的插件在团队合作,前端服务方面也有所涉及,你也可以称它为前端工程化工具。
三、安装和入门
既然gulp是一种工具,那么要想使用它就需要下载安装到自己的电脑。它是基于nodejs流的,而nodejs又与npm包管理天然共生,所以gulp作为npm的一个依赖包可以直接使用npm下载安装。
安装到全局环境下
npm install --global gulp
确定是否安装成功
gulp --version
本地新建项目test,切换到目录下。初始化npm依赖配置文件 package.json
npm init
点击回车,所有初始配置默认。将gulp安装依赖到本地项目
npm i gulp --D
配置gulp文件,项目目录下新建gulpfile.js。
let gulp = require("gulp");// 按commonjs规范引入
gulp.task("default",()=>{
console.log("default task run!");
})
default 任务会在执行gulp命令时默认执行。启动执行以上代码,可以使用命令 gulp 或 gulp default.
gulp
task的名字支持我们进行自定义,它会执行回调函数内的命令。如执行命令gulp hello,以下代码会输出 hello
gulp.task("hello",()=>{
console.log("hello");
})
如果我们有多个自定义任务需要执行,可以使用以下这种方式:
let gulp = require("gulp");
gulp.task("hello",()=>{
console.log("hello");
})
gulp.task("add",()=>{
console.log(1+2);
})
gulp.task("default",["hello","add"])
在当前目录下直接执行gulp就可执行hello和add内代码。
文件复制
copy单个文件到指定目录:
项目根目录下新建index.html文件 , gulpfile.js中代码如下:
gulp.task("copy:index",()=>{
// pipe() 管道 可以传入一个参数作为目标 gulp.dest()会保存到对应文件夹
return gulp.src("index.html").pipe(gulp.dest("dist"))
})
gulp.task("default",["copy:index"])
执行命令gulp,会在当前目录新建dist目录,并copy index.html到该目录下。一般dist文件夹代表的是我们线上环境使用的代码。
gulp.src() 根据路径获取源文件流
.pipe() 管道 处理各种输入流并支持输出到指定目录
gulp.dest() 将文件流输出到指定目录
gulp还可以根据文件类型匹配多个文件并进行操作。下面代码是复制多个图片文件到dist目录下:
gulp.task("copy:images",()=>{
return gulp.src("images/*.png").pipe(gulp.dest("dist/images"));
})
gulp.task("default",["copy:images"])
pipe()方法就是一个管道,将文件流从一个目录输出到另一个目录。
操作多种后缀名文件:
gulp.src('images/*.{jpg,png}') //获取.jpg .png 类型文件流
操作指定文件夹下所有文件:
gulp.src("images/**/*")
*/表示当前images文件夹下所有的内容.
操作多个文件夹下的不同文件:
gulp.src(['json/*.json','xml/*.xml']);
排除某个或某种文件:
return gulp.src(['xml/*.xml','json/*.json','!json/secret.json']).pipe(gulp.dest('dist/data'))
使用逻辑符号!可排除某些暂时不想操作的特殊文件。以上代码代表将xml下所有.xml文件以及json文件夹下所有.json文件复制到dist下的data文件夹,但不包括json下的secret.json.
文件合并
gulp.task("merge",()=>{
return gulp.src(["xml/*.xml","json/*.json"]).pipe(gulp.dest("dist/data"));
});
gulp.task("default",["merge"]);
上面代码可以将不同文件夹下的文件合并到同一个文件夹下。不过我们最常用到的操作是将多个文件合并到某个单文件中。例如多个js,css文件的压缩合并等。在后续介绍gulp插件时我们将给出示例。
文件监听
gulp自带监测文件变化的方法 gulp.watch() 调用方法如下:
gulp.watch(targetFileUrl,taskNames);
gulp.task('watch',()=>{
gulp.watch('index.html',['copy:index']);
gulp.watch('images/**/*',['copy:images']);
gulp.watch(['json/*.json','xml/*.xml','!json/secret.json'],['merge']);
})
我们可以使用gulp watch 命令启动监听,当我们在项目根目录下操作index.html等文件时,gulp监听到文件修改就会执行相应的命令,将修改过的文件重新copy到dist线上目录下。这样可以省去开发人员修改完成后的复制操作,也可避免因为遗忘造成的损失。
在学习了上述内容后,可以说我们对gulp有了一个初步的了解,但是gulp真正的强大之处并不在于此,而是在于其丰富的插件。下一篇文章我们会和大家一起学习如何使用这些插件。