gulp处理文件 | 易学教程

通常，我们使用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/

来源：CSDN

作者：黄宝康

链接：https://blog.csdn.net/huangbaokang/article/details/104605810

标签

gulp