gulp是什么
gulp是基于node.js的自动化项目构建工具,能自动完成: js,html,css,image,sass/less等文件的
压缩,合并,测试,删除,部署,混淆,
简单来说gulp的使用就是,用gulp的api来配置运行方式,
用路径来配置控制哪些文件,用插件来执行具体的操做,具体的事情是插件来做的 我所做的事是,决定哪些文件用哪些插件
安装
在bash命令行: npm install gulp -g
核心api
路径
为什么需要路径
要先找到,才能进行处理如果只是要处理一个文件,只需要把路径写死就可以了,但是很多时候是很多文件是一种处理方式. 那样还一个一个的写,就太麻烦了,于是就出现了路径匹配,相似的文件放在一个文件夹里,统一匹配,统一处理.类似于正则表达式,但是多了一个特殊字符路径分割符/,
语法(globs语法)
*,匹配0个或多个字符,只能匹配单级目录路径,不能匹配路径分割符/,除非/出现在最末尾**, 匹配0个或多个目录或子目录,可以匹配路径分割符/,也就是说可以匹配多级目录,左右出了路径分隔符,不能出现其他字符
如果在 ** 左右出现了其他字符,那么 ** 的作用和 * 的作用相同?, 表示0个或1个,出现在要控制的字符的前面,不能匹配路径分割符/;匹配符 [...] , 表示匹配中括号里面的任意单个字符,
当[...]中括号里面的第一个字符是^或者!时,表示不匹配总括号里面的任意字符! ,不匹配,在字符前出现+ ; 匹配一个或多个,在字符前出现!(pattern | pattern | pattern); 匹配给定括号里面的任意一模式都不匹配的;@(pattern | pattern | pattern); 匹配括号中给定模式的任意一次
路径联系
* 匹配 a.js,x,y, abc, abc/ 为true ; a/b.js 为false;
\*.* 匹配 a.js , style.css, a.b, x.y 为true;
\*/\*/\*.js 匹配 a/b/c.js, x/y/z.js 为true, a/b.js, a/b/c/d.js为false
** 匹配 a/b/c.js ;
**/*.js 匹配a/b/c/d.js 为true ; a.js为true a/b/c.css为false ;
a/**/z 匹配 a/b/c/z 为true,
a/**b/z 匹配 a/adb/z 为true ; a/b/d/b/z 为false
?.js 匹配 a.js ,b.js 为true;ab.js为false
a?? 匹配 abc , a,ab true ; abcd为false,ab/为false,不能皮诶路径分隔符
[xyz].js 匹配 x.js ;y.js为true
[^xyz].js 匹配 a.js, b.js 为true, x.js, ab.js为false
gulp语法
gulp工作的基本流程就是gulp.task()开始运行,通过gulp.src(匹配路径)来找到文件,
等插件操作完成之后,用gulp.dest(匹配路径)来输出文件,当文件发生变化时用gulp.watch()
来监控这种变价;
gulp.task()开始运行
gulp.task(name, [depend], fn)
//task定义一个gulp任务
gulp.task("mincss", ["taskless"], function(){
gulp.src(["src/*.css"])
.pipe(minifyCss())
.pipe(gulp.dest('./dist/css'))
})
name: 必填:String, 指定的任务名称,不能有空格depend: 可选:StringArray,该任务依赖的任务fn: 必填: Function,该任务调用的插件操作
英文单词: depend依赖, task任务如果任务名为'default',那么该任务为默认任务,gulp开始执行时,默认执行该任务
任务依赖
gulp.task('defaule', ['one', 'two', 'three']) 如果任务之间有依赖,会先执行依赖的任务,但是如果某个任务是异步的, gulp不会等待异步任务,而是直接执行下面的任务,如果有需要可以用专门的异步任务写法
异步任务
gulp.task('one',function(){
setTimeout(function(){
console.log(11111)
},5000);
})
如果想要等待异步任务执行完之后,再进行后续任务,有三中方法可以实现,这里我只写一种
在异步操作执行完后执行一个回调函数来通知gulp这个异步任务执行完毕, 这个回调函数就是任务函数的第一个参数
gulp.task('one',function(cb){
setTimeout(function(){
console.log("完了");
cb(); //执行回调,表示这个异步任务已完成;
})
})
gulp.src()输入文件
gulp.src(path, option)
path: 必填: String 或者 StringArray,引入文件的路径option: 可选: Object,配置项
option有三个属性buffer,read,base;
option.buffer: boolean, 默认true;如果是false,将返回file.content的流,并且不缓存文件,处理大文件有效option.read: boolean,默认true; 如果是false,不执行读取文件操作,返回nulloption.base: String,设置输出路径的以某个路径的某个组成部分为基础向后拼接 gulp.src("abc/js/*.js",{base: "abc"})
.pipe(minify)
.pipe(gulp.dest('build'));
当有多中匹配模式是可以使用数组 gulp.src(['js/ * .js', 'css/ * .css']);
gulp.dest()输出文件
gulp.dest(path,option);
peth: string 或者function(函数返回一个路径);
option:object:可选:两个属性cwd,mode
option.cwd : String,默认process.cwd();前脚本的工作目录的路径,相对路径时用到option.mode: string, 默认0777,指定被创建文件夹的权限; **用gulp.dest()把文件流写入文件后,文件流仍然可以使用
gulp.watch()监控到文件发生变化
gulp.watch(glob, option, [task], cb)
glob: string或者stringArray, 匹配路径,option: 配置项:可选task :StringArray: 必填,要执行的任务数组cb: 可选,function,回调函数;
转载于:https://www.cnblogs.com/bridge7839/p/6617748.html
相关资源：数据结构—成绩单生成器
