npm 包 gulp-size 使用教程

前端工程化中，打包工具是必不可少的。而gulp是一个非常流行的任务自动化构建工具。其中一个常用的插件就是gulp-size，它可以帮助我们计算文件的大小，并输出到控制台。

安装 gulp-size

要使用gulp-size，首先需要在项目中安装gulp和gulp-size这两个npm包。可以通过以下命令进行安装：

npm install --save-dev gulp gulp-size

使用 gulp-size

安装好gulp和gulp-size之后，就可以开始使用gulp-size了。首先需要在gulpfile.js文件中引入gulp和gulp-size：

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

接下来，在gulp任务中使用gulp-size即可计算文件大小并输出到控制台。例如，如下代码展示了如何统计dist目录下所有文件的大小：

gulp.task('size', function() {
  return gulp.src('dist/**/*')
    .pipe(size())
    .pipe(gulp.dest('dist'));
});

这段代码会将dist目录下所有文件的大小统计出来，并输出到控制台。另外，还可以通过传递参数来改变输出单位。例如，可以将输出单位改为KB：

gulp.task('size', function() {
  return gulp.src('dist/**/*')
    .pipe(size({ showFiles: true, pretty: false, gzip: true, } )
    .pipe(gulp.dest('dist'));
});

这段代码会将输出单位改为KB，并同时显示每个文件的大小、不使用美化输出方式以及计算压缩后的文件大小。

指导意义

使用gulp-size可以帮助我们更好地了解项目中文件的大小情况，从而优化打包过程和减小文件体积。此外，也可以通过参数配置来满足自己的需求。

总之，gulp-size是一个非常实用的插件，建议在项目中使用，以提高工作效率。

示例代码

完整的gulpfile.js示例代码如下：

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

gulp.task('size', function() {
  return gulp.src('dist/**/*')
    .pipe(size({ showFiles: true, pretty: false, gzip: true }))
    .pipe(gulp.dest('dist'));
});

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47799