前段构建工具gulp原理及使用教程

1 gulp是什么

前端构建工具，gulp是基于Nodejs，自动化地完成 javascript、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后刷新浏览器。借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。                                    

2  环境搭建

由于gulp是基于Node，搭建gulp之前首先安装node。node项目的依赖、命令都需要一个文件来进行管理，就是package.json 文件，在搭建gulp之前，首先要运行npm init 这时候项目中就会出现我们需要的package.json文件。gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。新建一个文件名为gulpfile.js的文件，然后放到项目目录中。

3 安装依赖

1 gulp 整个项目构建的基础； 2 gulp-autoprefixer 自动添加兼容浏览器的前缀； 3 gulp-concat 合并js指令；4 gulp-connect 配置服务器实现热更新+自动刷新；

5 gulp-file-include 公共文件的引用； 6 gulp-less 将less文件编译成css文件；7 gulp-minify-css 对css文件进行压缩；8 gulp-uglify 对js文件进行压缩

9 gulp-rename 对文件的重命名；10 gulp-htmlmin 对html文件的压缩；11 gulp-imagemin 对图片进行压缩；12 gulp-clean文件的删除； 13 gulp-livereload 监听文件变化刷新页面

 这是我项目安装的一下依赖的具体版本号。

需要注意需要在package.json文件中设置项目的入口文件，在gulp项目中需要指定为gulpfile.js作为入口文件

4  gulp API

1 gulp.task()  用来定义gulp任务，语法为gulp.task(name[, deps], fn) ；

• name: 为任务名
• deps: 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
• fn: 为任务函数，我们把任务要执行的代码都写在里面，是当前任务的实际处理逻辑。该参数也是可选的。

2 gulp.src() 获取文件流，存储我们开发时候编译的html、js、css等文件，语法为gulp.src(globs[, options] )

• globs:文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)
• options:可选参数。通常情况不需要用到

     bundleJs为这个任务的方法名，通过**/*来匹配js文件夹下所有的文件夹和文件。gulp.src()内部使用node-glob模块实现文件匹配。具体匹配方法这里不做详细解读。

3 gulp.dest()写文件，语法为gulp.dest(path[,options])

• path为写入文件的路径
• options为一个可选的参数对象，通常我们不需要用到

    要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。
    gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()        中，gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件        的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名。参考            gulp.src()中的截图例子。

4 gulp.watch()用来监视文件的变化，语法为gulp.watch(glob[, opts], tasks)

• glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
• opts 为一个可选的配置对象，通常不需要用到
• tasks 为文件变化后要执行的任务，为一个数组

5 gulp建立一个本地的webServer

  root为开启服务的文件夹，port为端口，livereload监控代码变化实时刷新页面

附上我自写的一套gulp基础程序，欢迎批评指正！ ​​​​​​​