阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Gulp 多次输出/分阶段输出

    多次输出(分阶段输出)

    此功能可用于在同一个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');
    })()
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录