zoukankan      html  css  js  c++  java
  • 构建工具gulp之主要API

    构建工具gulp之主要API

    1. gulp.src(globs[, options])

    src方法用于产生数据流。它的参数表示所要处理的文件,这些指定的文件会转换成数据流。

    src方法的参数可以是一个字符串:

    gulp.src('images/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'));
    
    

    src方法的参数还可以是一个数组,用来指定多个成员:

    gulp.src(['js/**/*.js', '!js/**/*.min.js'])
    

    ● globs参数通配符路径匹配规则如下:

    js/app.js:指定具体的文件名;

    *:匹配所有文件,例:src/*.js(包含src下的所有js文件);

    **:匹配0个或多个子文件夹,例:src/**/*.js(包含src下0个或多个子文件夹下的js文件);

    {}:匹配多个属性,例:src/{a,b}.js(包含a.js和b.js文件),src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);

    !:排除文件,例:!src/a.js(不包含src下的a.js文件);

    ?:匹配文件路径中的一个字符,例:js/a?.js 能匹配 js/ab.js,不能匹配 js/a.js;

    [...]:匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^或!时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法。例:js/a[0-3].js
    ,匹配js目录下以a开头,第二个字符为0-3之间(包括0和3)的js文件。若改为 ["js/[^ab].js"],则匹配 js/c.js,不匹配 js/cd.js、js/ac.js;

    ?(pattern|pattern|pattern):匹配多个 pattern 中 0 或 1 个(精确匹配,不可以组合)。例:js/?(a|b).js,匹配 js 目录下的 a.js、b.js,不匹配 ab.js

    +(pattern|pattern|pattern):至少匹配多个 pattern 中的一个。例:js/+(a|b)b.js,匹配 js 目录下的 ab.js、bb.js、ababab.js,不能匹配 abcd.js(也就是说:只允许匹配出现在范围内的字符) ,也不能像 js/*(a|b)b.js 那样匹配 b.js。

    *(a|b|c):匹配括号中多个 pattern 中0或任意多个(pattern可相互组合)。例:js/*(a|b|c).js,匹配 js 目录下的 a.js、ab.js、abc.js、ba.js,不匹配 abcd.js(也就是说:只允许匹配出现在范围内的字符)。

    @(pattern|pattern|pattern):匹配多个 pattern 中的任意一个(即不可以组合,且不能为空或大于1个)。例:js/@(a|b)b.js,匹配 js 目录下的 ab.js、bb.js,不匹配 b.js、abb.js、abc.js。

    ● options类型(可选),有3个属性buffer、read、base;

    options.buffer:(默认:true)设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用;

    options.read:(默认:true)设置false,将不执行读取文件操作,返回null;

    options.base:设置输出路径以某个路径的某个组成部分为基础向后拼接;

    2. gulp.dest(path[, options])

    dest方法是指定处理完后文件输出的路径;

    gulp.src('images/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'));
    
    

    path 文件将被写入的路径(输出目录)。也可以传入一个函数,在函数中返回相应路径;

    options 配置对象,有2个属性cwd、mode;

    options.cwd:类型:String,默认:process.cwd():前脚本的工作目录的路径 当文件输出路径为相对路径将会用到;

    options.mode:类型:String,默认:0777 指定被创建文件夹的权限;

    3. gulp.task(name[, deps], fn)

    task定义一个gulp任务;

    gulp.task('taskname', function() {
      // do something
    });
    

    name 任务的名字,如果你需要在命令行中运行你的某些任务,那么,请不要在名字中使用空格。

    deps 一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。

    gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
      // do something
    })
    

    fn 该函数定义任务所需要执行的一些操作。通常来说,它会是这样中形式

    gulp.src().pipe(taskFn())
    

    4. gulp.watch(glob [, opts], tasks)/gulp.watch(glob [, opts, cb])

    watch监视文件,并且可以在文件发生改动时候做一些事情。

    glob 需要处理的源文件匹配符路径

    opts 类型(可选):Object 具体参看gaze https://github.com/shama/gaze

    tasks 类型(Array):需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字

    cb(event) 类型(可选):Function 每个文件变化执行的回调函数,callback 会被传入一个名为 event 的对象,这个对象描述了所监控到的变动

    gulp.watch('js/**/*.js', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    

    event.type 发生的变动的类型:added, changed 或者 deleted。

    event.path 触发了该事件的文件的路径。

    本文中主要把gulp的api介绍完了,基本上gulp也算是掌握了。 下一篇文章我们将逐步去了解各种任务的插件使用。

  • 相关阅读:
    复杂链表的复制
    [CSP-S模拟测试]:抽卡(概率DP)
    [CSP-S模拟测试]:计划(前缀和)
    [CSP-S模拟测试]:公园(BFS+剪枝)
    [CSP-S模拟测试]:长寿花(DP+组合数)
    [CSP-S模拟测试]:喝喝喝(模拟)
    [CSP-S模拟测试]:次芝麻(数学)
    [CSP-S模拟测试]:赤壁情(DP)
    [CSP-S模拟测试]:密州盛宴(贪心)
    [CSP-S模拟测试]:春思(数学)
  • 原文地址:https://www.cnblogs.com/huiguo/p/12694844.html
Copyright © 2011-2022 走看看