自动化构建工具----gulp
Posted wxyblog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自动化构建工具----gulp相关的知识,希望对你有一定的参考价值。
gulp是什么?
Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发环境)。
gulp基于流的操作。
常见构建工具:Grunt,gulp,webpack,FIS..
gulp有什么用?
网页自动刷新,CSS预处理,代码检测,图片压缩等功能,只需要简单的命令行就可以全部完成。使用它,
可以简化工作,让你把重点放在功能的开发上,同时减少人为失误,提高开发的效率和质量。
gulp怎么用?
.以gulp@3.9.1为例
1.初始化npm
npm init
2.安装gulp
以全局方式安装gulp
npm install gulp -g
全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中,然后在命令行中执行
想把gulp写进项目package.json文件的依赖中,则可以加上--save-dev:
npm install gulp --save-dev
加上-dev为开发依赖,项目上线时不需要
不加-dev为生产依赖,项目上线时需要用到的包,例如express
3.建立gulpfile.js文件
gulp需要一个文件作为它的主文件,在gulp中这个文件叫做 gulpfile.js 的文件
放置在项目的根目录中,之后的gulp指令操作就在gulpfile.js文件中进行
4.引入gulp模块
var gulp=require(‘gulp‘);
5.使用gulp API
gulp总共4个API,1个管道
1. gulp.src(globs)入口文件路径
globs:具体路径,或多个路径的数组,也可以用字符来匹配我们想要的文件
*
匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾**
匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了。如果出现在末尾,也能匹配文件。?
匹配文件路径中的一个字符(不会匹配路径分隔符)[...]
匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^
或!
时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法!(pattern|pattern|pattern)
匹配任何与括号中给定的任一模式都不匹配的?(pattern|pattern|pattern)
匹配括号中给定的任一模式0次或1次,类似于js正则中的(pattern|pattern|pattern)?+(pattern|pattern|pattern)
匹配括号中给定的任一模式至少1次,类似于js正则中的(pattern|pattern|pattern)+*(pattern|pattern|pattern)
匹配括号中给定的任一模式0次或多次,类似于js正则中的(pattern|pattern|pattern)*@(pattern|pattern|pattern)
匹配括号中给定的任一模式1次,类似于js正则中的(pattern|pattern|pattern)-
下面以一系列例子来加深理解
*
能匹配a.js
,x.y
,abc
,abc/
,但不能匹配a/b.js
*.*
能匹配a.js
,style.css
,a.b
,x.y
*/*/*.js
能匹配a/b/c.js
,x/y/z.js
,不能匹配a/b.js
,a/b/c/d.js
**
能匹配abc
,a/b.js
,a/b/c.js
,x/y/z
,x/y/z/a.b
,能用来匹配所有的目录和文件**/*.js
能匹配foo.js
,a/foo.js
,a/b/foo.js
,a/b/c/foo.js
a/**/z
能匹配a/z
,a/b/z
,a/b/c/z
,a/d/g/h/j/k/z
a/**b/z
能匹配a/b/z
,a/sb/z
,但不能匹配a/x/sb/z
,因为只有单**
单独出现才能匹配多级目录?.js
能匹配a.js
,b.js
,c.js
a??
能匹配a.b
,abc
,但不能匹配ab/
,因为它不会匹配路径分隔符[xyz].js
只能匹配x.js
,y.js
,z.js
,不会匹配xy.js
,xyz.js
等,整个中括号只代表一个字符[^xyz].js
能匹配a.js
,b.js
,c.js
等,不能匹配x.js
,y.js
,z.js
当有多种匹配模式时可以使用数组
//使用数组的方式来匹配多种文件 gulp.src([‘js/*.js‘,‘css/*.css‘,‘*.html‘])
2.管道符pipe()
gulp.src(globs) 将文件匹配到,然后通过pipe方法导入到gulp的插件中,最后把经过插件处理后的流再通过pipe方法导入到dest(path)写入文件,
这个function作用无非是接受上一个流(stream)的结果,并返回一个处理后流的结果(返回值是一个stream对象)。
3.gulp.dest(path)方法是用来写文件
通过pipe方法导入到将文件写入到指定目录中
只能用来指定要生成的文件的目录,而不能指定生成文件的文件名,它生成文件的文件名使用的是导入到它的文件流自身的文件名,
所以生成的文件名是由导入到它的文件流决定的,即使我们给它传入一个带有文件名的路径参数,然后它也会把这个文件名当做是目录名
4.gulp.task()方法用来定义任务
gulp.task(name[, deps], fn)
name 为任务名
deps 是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数
fn 为任务函数,我们把任务要执行的代码都写在里面。该参数也是可选的。
数组中放着其他任务的任务名,当调用name的时候,其他任务也先执行,然后执行name任务
任务名定义为:default 为默认任务名,需要执行时直接在npm 命令好行中 输入 gulp
5.gulp.watch()用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。其语法为
gulp.watch(glob[, opts], tasks)
glob 为要监视的文件匹配模式,规则和用法与gulp.src()
方法中的glob
相同。文件具体的路径和文件
opts 为一个可选的配置对象,通常不需要用到
tasks 为文件变化后要执行的任务,为一个数组 ,数组里是相应的任务名 。
只要监视的文件发生改变,则任务就会执行
如何执行自定义任务:
npm命令行中输入:
gulp 任务名
小练习:
var gulp=require(‘gulp‘); //引入模块 var less=require(‘gulp-less‘); //引入编译less的插件 gulp.task(‘byless‘,function () //定义任务名 ,任务函数 return gulp.src("./less/*.less") //匹配文件 .pipe(less()) //通过管道符参数,gulp插件进行处理 .pipe(gulp.dest("./css/index.css")) //处理完后写入文件 ) gulp.task(‘abc‘,function() //定义任务名,任务函数 gulp.watch("less/less.less",[‘byless‘]) //添加监听 )
查考博客:https://www.cnblogs.com/2050/p/4198792.html
以上是关于自动化构建工具----gulp的主要内容,如果未能解决你的问题,请参考以下文章