npm 包 gulp-concatenate 使用教程

前言

在前端开发中，我们通常会需要将多个 CSS 或 JS 文件合并成一个文件以减少 HTTP 请求次数，提升页面性能。而 gulp-concatenate 就是一个帮助我们实现这一目标的 npm 包，通过使用 gulp-concatenate，我们可以简单方便地将多个文件合并成一个文件。

安装 gulp-concatenate

使用 gulp-concatenate 前，首先我们需要在项目中安装它。只需要在终端中输入以下命令即可：

npm install --save-dev gulp-concatenate

使用 gulp-concatenate

引入 gulp-concatenate

在使用 gulp-concatenate 前，我们需要引入它。可以通过以下代码实现：

const gulp = require('gulp');
const concat = require('gulp-concatenate');

合并文件

接下来，使用 gulp.task() 新建一个任务，在该任务中，我们可以使用 gulp.src() 方法将需要合并的文件读入，然后使用 concat() 方法将读入的文件合并成一个文件，并使用 gulp.dest() 将合并后的文件输出到指定位置。

以将 main.css、normalize.css 两个文件合并为一个 all.css 文件为例：

gulp.task('concat-css', function() {
  return gulp.src(['normalize.css', 'main.css'])
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./dist/css/'));
});

上述代码中，gulp.src() 方法将 normalize.css 和 main.css 两个文件读入，concat() 方法将它们合并为一个 all.css 文件，gulp.dest() 方法将合并后的文件输出到 ./dist/css/ 文件夹下。

我们也可以使用类似的方法合并 JS 文件。以将 jquery.js、plugin.js 两个文件合并为一个 all.js 文件为例：

gulp.task('concat-js', function() {
  return gulp.src(['jquery.js', 'plugin.js'])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/js/'));
});

额外配置

sourcemap

为了方便调试，我们通常会需要生成 sourcemap 文件。gulp-concatenate 也支持生成 sourcemap 文件，我们只需要在 concat() 方法中传入一个参数即可。

例如，在生成 all.css 文件时，我们可以通过以下代码生成 sourcemap 文件：

gulp.task('concat-css', function() {
  return gulp.src(['normalize.css', 'main.css'])
    .pipe(concat('all.css', { sourceMaps : true }))
    .pipe(gulp.dest('./dist/css/'));
});

separator

有时，我们在合并文件时需要在文件间添加分隔符。例如，在合并 JS 文件时，我们可以通过以下代码在文件间添加分号 ;：

gulp.task('concat-js', function() {
  return gulp.src(['jquery.js', 'plugin.js'])
    .pipe(concat('all.js', { newLine : ';' }))
    .pipe(gulp.dest('./dist/js/'));
});

上述代码中，我们将 concat() 方法传入的 newLine 参数设为分号 ;，表示在文件间添加分号。

总结

在本文中，我们介绍了如何使用 npm 包 gulp-concatenate 将多个文件合并成一个文件。我们可以使用 gulp.task() 新建一个任务，在其中使用 gulp.src() 方法和 concat() 方法将文件合并，然后使用 gulp.dest() 方法将合并后的文件输出到指定位置。我们还介绍了如何生成 sourcemap 文件以及如何在合并文件时添加分隔符。希望本文能够对你学习 gulp-concatenate 有所帮助。

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