20200115 gulp学习

gulp学习笔记，希望对你有用

20200115 gulp学习

• 资源
  • 官网
  • 插件搜索页面
• gulp入门
  • gulpfile
    • gulpfile转译
      • 比如typescript
      • 比如babel
    • gulpfile分割
      • 优点
        • 便于代码组织
        • 便于测试
      • 放在一个名为gulpfile的文件夹内
      • 有一个index.js文件
        • import多个子文件
  • 处理文件
    • src()
      • 输入流
      • 读取一个或者多个文件
    • pipe()
      • 所有文件格式转换的插件就结合pipe一起用
    • dest()
      • 输出流
      • 输出到一个目录
      • 用法
        • 一般放在末尾
        • 也可以放在中间，输出中间结果
    • 大多数情况下，利用 .pipe() 方法将插件放置在 src() 和 dest() 之间，并转换流（stream）中的文件
  • glob
    • 少用node的path模块
    • 一个星号 *
      • 匹配指定目录下的文件，不会递归到子目录
    • 两个星号 **
      • 匹配任意层级的目录
      • scripts/**/*.js
        • 这个 glob 被适当地限制在 scripts/ 目录下。它将匹配类似 scripts/index.js、scripts/nested/index.js 和 scripts/nested/twice/index.js 的文件
    • 取反 !
      • glob 数组中的取反（negative）glob 必须跟在一个非取反（non-negative）的 glob 后面
      • 举例
        • ['script/**/*.js', '!scripts/vendor/']
    • 匹配重叠
      • 在一个src中如果匹配重叠，gulp会尽量去重
  • 使用插件
    • 插件应当总是用来转换文件的
    • 常用插件
      • gulp-uglify
      • gulp-rename
      • gulp-if
  • 文件监控
    • 例子
      • watch('src/*.css', css);
      • src目录下有任何的css文件发生改动，就执行css任务
    • 不要使用同步任务
    • 允许初次执行
      • 带上选项，{ ignoreInitial: false },
    • 不允许队列，也就是说如果当前有任务在执行，此时又修改了文件，可以禁止他再次发起一个任务，禁用队列即可
      • { queue: false }
• 新鲜
  • npx
    • 什么是npx