gulp的介绍

gulp

概念：

gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的

官网：https://gulpjs.com/
中文官网：https://www.gulpjs.com.cn/docs/

安装：

全局安装：

npm i gulp@3.9.1 -g

gulp -v # 测试是否安装成功

全局安装表示在当前电脑中可以使用gulp环境了

局部安装

npm i gulp@3.9.1 --save-dev # 因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖

局部安装表示在当前项目要使用的gulp

局部安装gulp要和全局安装的gulp版本保持一致

gulp是一个基于任务的工具，也就是说，gulp规定，不管做什么功能，都用统一的接口管理，必须去注册一个任务，然后去执行这个任务，在任务代码中，去做想想做的功能。这是gulp的特点之一：任务化。

gulp的每个功能都是一个任务，压缩css的任务、合并文件的任务。。。gulp规定任务要写在一个叫做glupfile.js的文件中，在这个文件中用来配置所有任务。

首先，gulp和node中的其他模块一样，使用的时候需要引入：

varglup=require(“gulp”);

这个gulp是一个对象，gulp提供了很多接口，都是这个对象的方法。

gulp提供的接口：

注册任务

gulp.task(name[,deps],fn)

参数：

name是任务名称，执行任务时，使用这个名称

fn是一个回掉函数，代表这个任务要做的事情

例：

gulp.task(“print”,function(){console.log(“打印123”);})

执行任务：在命令行使用gulp命令，后面跟任务名称：

gulp print

如果任务比较多的话，一个一个来执行，效率会很低，所以gulp提供了一个默认任务，可以将要执行的所有任务放在一个数组中，这样只需要执行这个默认任务就能执行数组中的所有任务：

gulp.task(“print1”,function(){console.log(“打印123”);})gulp.task(“print3”,function(){console.log(“打印321”);})gulp.task(“default”,[“print1”,“print3”]);

执行默认任务：不用写任务名

gulp

gulp自己有内存，当我们使用gulp进行项目构建的时候，gulp会将本地文件数据读取到gulp内存中，接下来的操作都在内存中进行，操作完成以后，再从gulp的内存中输出到本地，比如说当我们要合并两个文件的时候，先将这两个文件中的内容读取到内存中，然后在内存中进行合并，最后将合并后的内容从内存中输出到本地的文件中。

这样，对应着两个操作，一个是输入，一个输出，也就是I/O操作。这是gulp的又一个特点之一：基于流。

读取文件

将本地文件读取到gulp内存中

gulp.src(globs[, options])

参数：

src方法主要是用来读取目标源文件，所以参数就是一个目标源文件的路径

输出到文件

将内存中数据输出到本地文件中

gulp.dest(path[,options])

参数：

dest方法主要用来将数据输出到文件中，所以参数就是目标文件路径。

监视文件变化

用来监视某个或某些文件发生变化，可以在变化的时候，执行一个回掉函数，以保证文件中的代码和效果一致

gulp.watch()

gulp插件

我们要处理文件的合并、压缩等操作，接口中没有提供，都放在了插件中。

插件下载：

npm install 插件名 --save-dev

gulp-concat : 合并文件(js/css)

gulp-uglify : 压缩js文件

gulp-rename : 文件重命名

gulp-less : 编译less

gulp-sass：编译sass

gulp-clean-css : 压缩css

gulp-livereload : 实时自动编译刷新

gulp-htmlmin：压缩html文件

gulp-connect：热加载，配置一个服务器

gulp-load-plugins：打包插件（里面包含了其他所有插件）

作者：小五同学H
链接：https://www.jianshu.com/p/87a773a81dbd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。