美文网首页
工作流简化之Gulp

工作流简化之Gulp

作者: 卖梦想的男孩 | 来源:发表于2017-07-22 11:33 被阅读11次

    gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

    gulp是一个任务自动化的工具集,旨在帮助开发者们处理复杂耗时的编译、处理工作。

    安装

    npm install gulp-cli -g
    npm install gulp -D
    touch gulpfile.js
    gulp --help
    

    角色定义

    gulp主要有几个角色

    • 输入流:src
      用来输入处理的文件返回文件流
    • 输出流:dest
      用来将文件流输出到特定的文件
    • 任务:task
      gulp执行的任务或任务依赖
    • 监控:watch
      监控文件变动触发相应的task

    使用指南

    gulp的任务系统定义在guplfile.js中,也可以在运行时通过--gupfile 来指定任务文件,一般约定默认。

    • gulp.src(globs[, options])
      globs:指定输入的文件匹配规则(String or Array),支持用!来排除文件
      options:用来指定处理文件流的一些设置

    • buffer 开启缓存,false时直接返回文件内容,处理大文件时建议开启。默认true

    • read 读取文件,false时不会读取文件,返回null,默认为true

    • base 指定文件处理的基目录,默认是匹配文件本身的目录

    • gulp.dest(path[, options])
      path 文件输出路径(String or Function)
      options 文件的输出配置

    • cwd 文件的输出目录,默认process.cwd()。[官方说只有相对路径才有效,个人设置后相对、绝对路径都无效]

    • mode 文件的权限 默认0777

    • gulp.task(name [, deps] [, fn])
      定义任务
      name 任务名
      deps 依赖的其他任务
      fn 任务执行的回调,函数支持callback参数,如果callback返回的非null或undefined则任务出错了,将停止任务

    • gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
      监控文件改变触发task or cb
      glob 文件流同src
      opts https://github.com/shama/gaze
      cb 触发事件

    • type
      事件类型 added, changed, deleted or renamed

    • path
      文件路径

    var watcher = gulp.watch('xxxx',['task1','task2']);
    watcher.on('event_type', function(event) {
      //do what you need when event_type happend
    });
    

    or

    gulp.watch('xxxx', function(event) {
      //do what you need when all event type happend
    });
    

    官网 http://gulpjs.com
    API https://github.com/gulpjs/gulp/blob/master/docs/API.md

    相关文章

      网友评论

          本文标题:工作流简化之Gulp

          本文链接:https://www.haomeiwen.com/subject/mjzykxtx.html