Nodejs 新人求教：Gulp 在uglify js文件时如何添加类似于grunt的banner信息？

Nodejs 新人求教：Gulp 在uglify js文件时如何添加类似于grunt的banner信息？

如题，有相关的插件或是配置参数么？

5 回复

当然可以！在使用 Gulp 进行 JavaScript 文件压缩（通过 UglifyJS）时，你可能希望在压缩后的文件顶部添加一些版权声明或 banner 信息。虽然 Gulp 的配置不像 Grunt 那样直接，但你可以通过组合多个插件来实现这一目标。

以下是一个简单的示例，展示如何在 Gulp 中为压缩后的 JS 文件添加 banner 信息：

安装必要的插件

首先，确保你已经安装了 gulp、gulp-uglify 和 gulp-header 插件。如果没有安装，可以通过 npm 安装它们：

npm install --save-dev gulp gulp-uglify gulp-header

创建 Gulp 任务

接下来，在你的 Gulpfile.js 文件中创建一个任务，用于读取 JavaScript 文件，添加 banner 信息，并进行压缩：

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const header = require('gulp-header');

// 定义 banner 信息
const banner = ['/**',
    ' * <%= file.basename %> v<%= file.version %>',
    ' * <%= file.date %>',
    ' * Copyright (c) <%= new Date().getFullYear() %> <%= file.author %>',
    ' * Licensed under the MIT license:',
    ' * http://www.opensource.org/licenses/MIT',
    ' */',
    ''].join('\n');

// 创建 Gulp 任务
gulp.task('compress', function () {
    return gulp.src('src/js/*.js') // 指定源文件路径
        .pipe(header(banner, { // 添加 banner 信息
            file: {
                basename: 'your-file-name',
                version: '1.0.0',
                date: new Date().toISOString(),
                author: 'Your Name'
            }
        }))
        .pipe(uglify()) // 压缩文件
        .pipe(gulp.dest('dist/js')); // 输出到目标目录
});

// 默认任务
gulp.task('default', gulp.series('compress'));

解释

  1. 引入插件：我们引入了 gulp、gulp-uglify 和 gulp-header。
  2. 定义 Banner 信息：使用 gulp-header 插件，我们定义了一个包含版权信息和其他元数据的 banner。
  3. 创建任务：compress 任务读取指定目录下的所有 .js 文件，使用 header 插件添加 banner 信息，然后使用 uglify 压缩这些文件，并将结果输出到 dist/js 目录。

这样，当你运行 gulp compress 或默认任务 gulp 时，Gulp 将会自动处理这些文件并添加你指定的 banner 信息。


gulp-footer插件是否符合你的需求？

非常感谢，要的就是这个:-D。

gulp-header更适合O(∩_∩)O~

在 Gulp 中，你可以使用 gulp-header 插件来添加类似于 Grunt 的 banner 信息。这个插件允许你在处理后的文件前面添加任意文本。

以下是如何配置 Gulp 任务以在 Uglify JS 文件时添加 banner 信息的示例：

  1. 首先，你需要安装必要的插件：

    npm install --save-dev gulp gulp-uglify gulp-header

  2. 创建一个 Gulp 任务，例如 build，并在其中添加 banner 信息：

    const gulp = require('gulp');
const uglify = require('gulp-uglify');
const header = require('gulp-header');

// 定义 banner 信息
const banner = ['/**',
                ' * <%= pkg.name %> - <%= pkg.description %>',
                ' * @version v<%= pkg.version %>',
                ' * @link <%= pkg.homepage %>',
                ' * @license <%= pkg.license %>',
                ' */',
                ''].join('\n');

// 创建 Gulp 任务
gulp.task('scripts', function() {
  return gulp.src('src/js/*.js')  // 指定源文件路径
    .pipe(header(banner, { pkg : require('./package.json') }))  // 添加 banner 信息
    .pipe(uglify())  // 压缩 JS 文件
    .pipe(gulp.dest('dist/js'));  // 输出到目标目录
});

  3. 运行任务：

    gulp scripts

解释

  • gulp-header 插件用于在文件开头添加文本。
  • banner 是一个包含 banner 信息的数组，这些信息将在输出文件的顶部显示。
  • header() 方法接受两个参数：要添加的文本（在这里是 banner 数组）以及上下文对象（这里使用了 package.json 文件中的数据）。
  • uglify() 方法用于压缩 JavaScript 文件。
  • gulp.dest() 方法指定输出文件的目录。

这样，当你运行 gulp scripts 任务时，Gulp 会读取源文件，添加 banner 信息，压缩文件，并将结果输出到指定的目录。

回到顶部