zoukankan      html  css  js  c++  java
  • 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,回调函数;
  • 相关阅读:
    Java Native Method
    SQL语句优化
    Ibatis的环境搭建以及遇到的问题解决
    Java 构建器
    SpringMVC自定义视图 Excel视图和PDF视图
    java 枚举的常见使用方法
    mysql 根据某些字段之和排序
    MFC The Screen Flickers When The Image Zoomed
    How To Debug Qmake Pro File
    Gcc And MakeFile Level1
  • 原文地址:https://www.cnblogs.com/bridge7839/p/6617748.html
Copyright © 2011-2022 走看看