Gulp 多次输出/分阶段输出

🌙
手机阅读
本文目录结构
axihe

多次输出(分阶段输出)

此功能可用于在同一个pipe中创建未压缩和已压缩的文件。

dest() 可以用在 pipe 中间,用于将文件的中间状态写入文件系统。

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

const { src, dest } = require('gulp');
// babel
// npm install --save-dev gulp-babel @babel/core @babel/preset-env
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function () {
  return src('src/*.js')
    // 把 src 下面的文件经过babel转义
    .pipe(babel({
      presets: ['@babel/env']
    }))
    // 添加vendor下的文件
    .pipe(src('vendor/*.js'))
    // 把源文件移动到output/
    .pipe(dest('output/'))
    .pipe(uglify())
    // 把源文件,改为`.mini.js` 移动到output
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

https://a.axihe.com/npm/gulp/WX20200614-152921.png

整理的需求

/**
 * 场景:
 *    src 放平时写代码的文件,src 内的文件可能是新版本的ECMAScript写的代码;
 *    lib 放一些库,比如jquery.js
 * 需求
 *    1.把src下的文件,通过babel转换成兼容大多数浏览器的ES5代码
 *    2.把src和lib下的文件,全部放在 sources 目录下。作为源文件
 *    3.压缩混淆选中的JS文件
 *    4.把源文件,改为`.mini.js` 移动到 dist目录
 *  */

const { src, dest } = require('gulp');

// npm install --save-dev gulp-uglify gulp-rename
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

// npm install --save-dev gulp-babel @babel/core @babel/preset-env
const babel = require('gulp-babel');

exports.default = function () {
  return src('src/*.js')
    // 把 src 下面的文件经过babel转义
    .pipe(babel({
      presets: ['@babel/env']
    }))
    // 添加vendor下的文件
    .pipe(src('lib/*.js'))
    // 把源文件移动到 sources/
    .pipe(dest('sources/'))
    .pipe(uglify())
    // 把源文件,改为`.mini.js` 移动到 dist
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('dist/'));
}

src/inde 的文件

(async () => {
  function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
  }
  await sleep(500);
  console.log('done');
})()

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang