美文网首页
工作流简化之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

    gulp is a toolkit for automating painful or time-consumin...

  • gulp的使用

    什么是gulp 简单来说gulp就是一个前端的工作流工具。侧重于工作流 gulp的实质 gulp就是用js写了一个...

  • 基于gulp构建一个工作流

    实现前 实现之前,我们先来了解下 gulp 自动构建工具的具体流程 具体工作流程可以简化为读取文件流 --> 转化...

  • 5 gulp自动化构建工具

    Gulp自动化构建工具 ->聚焦点:工作流/流操作 ->gulp.task();/src();/dest();/w...

  • Gulp 使用方法(教程二)

    Gulp 官网 目录 load plugins 简化 gulp 载入流程 Babel 编译你的 JS 使用 con...

  • 『前端工程化』gulp(gulp3 && gul

    Gulp 什么是Gulp Gulp是基于Node.js的构建工具,我们使用它来集成前端开发环境,来构建自动化工作流...

  • gulp

    gulp 是一款nodejs应用,它是打造前端工作流的利器,打包、压缩、合并、git、远程操作...,gulp 简...

  • gulp常用插件

    最近在学习有关gulp的相关知识,gulp是打造前端工作流的利器,下面记录一些常用的插件 1.del插件安装方法 ...

  • 前端自动化构建工具vGulp

    开始之前 关于Gulp的介绍网上有许多,完整的Gulp自动化工作流配置也不少,但或多或少有不让人满意的地方,加上项...

  • npm-npmscript-gulp-webpack

    - npm的使用- 开发node应用- gulp介绍及实践- npm scripts打造前端工作流- webpac...

网友评论

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

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