gulp-size 使用教程

gulp-size 使用教程

gulp-sizeDisplay the size of your project项目地址:https://gitcode.com/gh_mirrors/gu/gulp-size

项目介绍

gulp-size 是一个用于显示项目大小的 Gulp 插件。它可以帮助开发者在构建过程中查看文件或项目的总大小，支持显示压缩后的大小，并且可以美化输出格式。

项目快速启动

安装

首先，你需要安装 gulp 和 gulp-size：

npm install --save-dev gulp gulp-size

使用

在你的 gulpfile.js 中引入并使用 gulp-size：

const gulp = require('gulp');
const size = require('gulp-size');

exports.default = () => (
  gulp.src('fixture/*.js')
    .pipe(size())
    .pipe(gulp.dest('dist'))
);

应用案例和最佳实践

显示每个文件的大小

如果你希望显示每个文件的大小，可以设置 showFiles 选项：

const gulp = require('gulp');
const size = require('gulp-size');

exports.default = () => (
  gulp.src('fixture/*.js')
    .pipe(size({ showFiles: true }))
    .pipe(gulp.dest('dist'))
);

显示压缩后的大小

如果你希望显示压缩后的大小，可以设置 gzip 选项：

const gulp = require('gulp');
const size = require('gulp-size');

exports.default = () => (
  gulp.src('fixture/*.js')
    .pipe(size({ gzip: true }))
    .pipe(gulp.dest('dist'))
);

典型生态项目

gulp-size 通常与其他 Gulp 插件一起使用，例如 gulp-notify，用于在构建过程中发送通知：

const gulp = require('gulp');
const size = require('gulp-size');
const notify = require('gulp-notify');

exports.default = () => {
  const s = size();
  return gulp.src('fixture/*.js')
    .pipe(s)
    .pipe(gulp.dest('dist'))
    .pipe(notify({
      onLast: true,
      message: () => `Total size: ${s.prettySize}`
    }));
};

通过这些配置，你可以在构建过程中实时查看项目的大小，并根据需要进行优化。

gulp-sizeDisplay the size of your project项目地址:https://gitcode.com/gh_mirrors/gu/gulp-size