gulp处理文件

古城微笑少年丶 2023-07-10 11:20 7阅读 0赞

通常，我们使用gulp提供的src()和dest()方法处理文件  
如：

const { src, dest } = require('gulp');
    
    exports.default = function() {
      return src('src/*.js')
        .pipe(dest('output/'));
    }

在项目中，我们经常使用babel格式化下我们的代码，在写入输出的相关目录。

const { src, dest } = require('gulp');
    const babel = require('gulp-babel');
    
    exports.default = function() {
      return src('src/*.js')
        .pipe(babel())
        .pipe(dest('output/'));
    }

如执行前gulpfile.js文件内容如下：

const { src, dest } = require('gulp');
    const babel = require('gulp-babel');
    
    function test(){console.log("hello world")}
    var name = "huangbaokang"; var age=30;
    obj ={"author":"huangbaokang",age:30}
    
    
    exports.default = function() {
      return src('*.js')
        .pipe(babel())
        .pipe(dest('output/'));
    }

执行gulp命令后，在output目录下生成的gulpfile.js文件内容如下，更漂亮了

const {
      src,
      dest
    } = require('gulp');
    
    const babel = require('gulp-babel');
    
    function test() {
      console.log("hello world");
    }
    
    var name = "huangbaokang";
    var age = 30;
    obj = {
      "author": "huangbaokang",
      age: 30
    };
    
    exports.default = function () {
      return src('*.js').pipe(babel()).pipe(dest('output/'));
    };

## 向流中添加文件 ##

新加入的文件只对后续的转换可用。  
src() 也可以放在管道（pipeline）的中间，以根据给定的 glob 向流（stream）中添加文件。新加入的文件只对后续的转换可用。如果 glob 匹配的文件与之前的有重复，仍然会再次添加文件。

这对于在添加普通的 JavaScript 文件之前先转换部分文件的场景很有用，添加新的文件后可以对所有文件统一进行压缩并混淆（uglifying）。

const { src, dest } = require('gulp');
    const babel = require('gulp-babel');
    const uglify = require('gulp-uglify');
    
    exports.default = function() {
      return src('src/*.js')
        .pipe(babel())
        .pipe(src('vendor/*.js'))
        .pipe(uglify())
        .pipe(dest('output/'));
    }

## 分阶段输出 ##

dest() 可以用在管道（pipeline）中间用于将文件的中间状态写入文件系统。当接收到一个文件时，当前状态的文件将被写入文件系统，文件路径也将被修改以反映输出文件的新位置，然后该文件继续沿着管道（pipeline）传输。

此功能可用于在同一个管道（pipeline）中创建未压缩（unminified）和已压缩（minified）的文件。

const { src, dest } = require('gulp');
    const babel = require('gulp-babel');
    const uglify = require('gulp-uglify');
    const rename = require('gulp-rename');
    
    exports.default = function() {
      return src('src/*.js')
        .pipe(babel())
        .pipe(src('vendor/*.js'))
        .pipe(dest('output/'))
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js' }))
        .pipe(dest('output/'));
    }

## 模式：流动（streaming）、缓冲（buffered）和空（empty）模式 ##

src() 可以工作在三种模式下：缓冲（buffering）、流动（streaming）和空（empty）模式。这些模式可以通过对 src() 的 buffer 和 read 参数 进行设置。

缓冲（Buffering）模式是默认模式，将文件内容加载内存中。插件通常运行在缓冲（buffering）模式下，并且许多插件不支持流动（streaming）模式。  
流动（Streaming）模式的存在主要用于操作无法放入内存中的大文件，例如巨幅图像或电影。文件内容从文件系统中以小块的方式流式传输，而不是一次性全部加载。如果需要流动（streaming）模式，请查找支持此模式的插件或自己编写。  
空（Empty）模式不包含任何内容，仅在处理文件元数据时有用。

内容参考：https://www.gulpjs.com.cn/docs/getting-started/working-with-files/