自动化构建工具----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的主要内容,如果未能解决你的问题,请参考以下文章

自动化构建工具gulp

gulp前端自动化构建工具入门篇

自动化构建工具Gulp初体验

前端自动化构建工具-gulp

Gulp-构建工具 相关内容整理

gulp自动化构建工具