gulp

gulp是什么

gulp是基于node.js的自动化项目构建工具,能自动完成: js,html,css,image,sass/less等文件的
压缩,合并,测试,删除,部署,混淆,

简单来说gulp的使用就是,用gulp的api来配置运行方式,

用路径来配置控制哪些文件,用插件来执行具体的操做,具体的事情是插件来做的
我所做的事是,决定哪些文件用哪些插件

安装

在bash命令行: npm install gulp -g

核心api

路径

为什么需要路径

• 要先找到,才能进行处理
• 如果只是要处理一个文件,只需要把路径写死就可以了,但是很多时候是很多文件是一种处理方式.
  那样还一个一个的写,就太麻烦了,于是就出现了路径匹配,相似的文件放在一个文件夹里,统一匹配,统一处理.
• 类似于正则表达式,但是多了一个特殊字符路径分割符/,

语法(globs语法)

1. *,匹配0个或多个字符,只能匹配单级目录路径,不能匹配路径分割符/,除非/出现在最末尾
2. **, 匹配0个或多个目录或子目录,可以匹配路径分割符/,也就是说可以匹配多级目录,左右出了路径分隔符,不能出现其他字符
   • 如果在 ** 左右出现了其他字符,那么 ** 的作用和 * 的作用相同
3. ?, 表示0个或1个,出现在要控制的字符的前面,不能匹配路径分割符/;
4. 匹配符 [...] , 表示匹配中括号里面的任意单个字符,
   • 当[...]中括号里面的第一个字符是^或者!时,表示不匹配总括号里面的任意字符
5. ! ,不匹配,在字符前出现
6. + ; 匹配一个或多个,在字符前出现
7. !(pattern | pattern | pattern); 匹配给定括号里面的任意一模式都不匹配的;
8. @(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'))
})

1. name: 必填:String, 指定的任务名称,不能有空格
2. depend: 可选:StringArray,该任务依赖的任务
3. 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)

1. path: 必填: String 或者 StringArray,引入文件的路径
2. option: 可选: Object,配置项
   • option有三个属性buffer,read,base;
   1. option.buffer: boolean, 默认true;如果是false,将返回file.content的流,并且不缓存文件,处理大文件有效
   2. option.read: boolean,默认true; 如果是false,不执行读取文件操作,返回null
   3. option.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

1. option.cwd : String,默认process.cwd();前脚本的工作目录的路径,相对路径时用到
2. option.mode: string, 默认0777,指定被创建文件夹的权限;
   **用gulp.dest()把文件流写入文件后,文件流仍然可以使用

gulp.watch()监控到文件发生变化

gulp.watch(glob, option, [task], cb)

1. glob: string或者stringArray, 匹配路径,
2. option: 配置项:可选
3. task :StringArray: 必填,要执行的任务数组
4. cb: 可选,function,回调函数;