gulp自动化构建工具----------初探

最新推荐文章于 2026-07-28 08:03:38 发布

原创最新推荐文章于 2026-07-28 08:03:38 发布 · 371 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

gulp

本文介绍了如何使用gulp作为自动任务运行器，用于处理javascript、coffee、sass、less等文件的自动化流程，包括测试、检查、合并、压缩等。首先，需要安装Node.js环境和全局安装gulp，然后在项目中安装gulp并创建package.json和gulpfile.js文件。通过gulpfile.js配置任务，可以实现文件路径的匹配和处理。通过学习，读者将掌握gulp的基本使用方法。

简介

gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

流程

第一步：

安装node环境，然后全局安装gulp

npm install -g gulp (npm install gulp -g)

第二步：

全局安装后，在每个需要使用gulp的项目中安装一次

npm install gulp --save-dev （当前项目文件夹下输入命令）

第三步：

新建package.json文件（基于nodejs 一个包清单 *json文件内不能写注释）

npm init

配置package.json文件, 这一部分看情况自己决定是否填, 不想填也可以, 直接按回车

  "name":"test",  //项目名称（必须）

  "version":"1.0.0",  //项目版本（必须）

  "description":"This is for study gulp project !",  //项目描述（必须）

  "homepage":"",  //项目主页

  "repository":{    //项目资源库

    "type":"git",

    "url":"https://git.oschina.net/xxxx"

  },

  "author":{    //项目作者信息

    "name":"surging",

    "email":"surging2@qq.com"

  },

  "license":"ISC",    //项目许可协议

  "devDependencies":{    //项目依赖的插件

    "gulp":"^3.8.11",

    "gulp-less":"^3.0.0"

  }

}

第四步：

新建gulpfile.js文件（配置文件）

//gulpfile.js

var gulp =require('gulp');

gulp.task('default',function(){

console.log('hello world');

});

第五步：

运行gulp

gulp 任务名   （编译less：命令提示符执行 gulp Less）

下面重点介绍gulp常用的glob匹配规则和技巧：

* 匹配文件路径中的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