如何将参数从命令行传递给 npm 和 grunt？

Question

我正在尝试自动化我的工作流程中的某些过程，为了做到这一点，我需要使用一些变量来控制我正在处理的环境。

我将从一个我尝试做的简单示例开始，它是一个创建新文件夹并复制一些样板文件的命令。为此，我使用 npm 和 grunt，如下所示：

package.json

"scripts": {
  "new": "grunt new --target
},

grunt.js

module.exports = function (grunt) {
  const target = grunt.option('target');
  console.log('Target: ', target);

  grunt.config.set('copy', {
    new: {
      files: [{
        expand: true,
        cwd: 'assets/zip',
        src: '*.zip',
        dest: 'projects/',
      }]
    },
  });
}

我试图这样称呼它：

npm run new --target:my-folder-name

这只是一个简单的例子，我正在运行其他脚本，例如解压缩文件、重命名、复制、处理 scss 等...

我期望的是运行将文件复制到名为my-folder-name 的文件夹的任务，但它没有发生。控制台正在打印true，而不是文件夹名称。

我需要做什么才能将参数传递给脚本？

Answer 1

假设我们设计的项目目录结构如下：

.
├── Gruntfile.js
├── assets
│   └── zip
│       ├── file1.zip
│       ├── file2.zip
│       └── file3.zip
├── node_modules
│   └── ...
└── package.json

然后考虑以下利用grunt-contrib-copy 的Gruntfile.js 示例：

Gruntfile.js

module.exports = function(grunt) {

  const target = grunt.option('target') || 'foobar'; // default dir is `foobar`.

  grunt.loadNpmTasks('grunt-contrib-copy');


  grunt.initConfig({
    copy: {
      zips: {
        files: [{
          expand: true,
          cwd: 'assets/zip',
          src: '*.zip',
          dest: 'projects/' + target
        }]
      }
    }
  });

  grunt.registerTask('copy-zips', [ 'copy:zips' ]);

};

通过grunt 命令输出。

1. 如果我们cd到项目目录并运行以下grunt命令：

   grunt copy-zips
   

   在项目目录的根目录中创建以下文件夹 (projects/foobar)。

   结果示例 A

   .
   ├── ...
   └── projects
       └── foobar
           ├── file1.zip
           ├── file2.zip
           └── file3.zip
   

   注意默认的foobar 文件夹已创建，其中包含*.zip 文件的副本。该文件夹被命名为foobar，因为我们没有通过命令行提供参数。

2. 接下来，如果我们再次cd 到项目目录并运行以下 grunt 命令：

   grunt copy-zips --target=my-folder-name
   

   在项目目录的根目录中创建以下文件夹 (projects/my-folder-name)。

   结果示例 B

   .
   ├── ...
   └── projects
       └── my-folder-name
           ├── file1.zip
           ├── file2.zip
           └── file3.zip
   

   注意这次创建了 my-folder-name 文件夹，其中包含 *.zip 文件的副本，因为我们提供了 --target=my-folder-name 参数/选项。 p>

通过npm 命令输出。

首先让我们在项目package.json中配置scripts部分如下：

包，json

{
  ...
  "scripts": {
    "copy-zips": "grunt copy-zips"
  },
  ...
}

1. 如果我们cd到项目目录并运行以下npm命令：

   npm run copy-zips
   

   我们得出的结果与上述结果示例 A 部分中所示的结果相同。

2. 接下来，如果我们再次 cd 到项目目录并运行以下npm 命令：

   npm run copy-zips -- --target=my-folder-name
   

   我们得出的结果与上述结果示例 B 部分中所示的结果相同。

   注意：npm run copy-zips 和参数--target=my-folder-name 之间的附加-- 选项。

   npm docs 描述-- 选项如下：

   从 npm@2.0.0 开始，您可以在执行脚本时使用自定义参数。 getopt 使用特殊选项-- 来分隔选项的结尾。 npm 会将-- 之后的所有参数直接传递给您的脚本：

---

补充说明：

如果您不想在projects 文件夹中创建my-folder-name 文件夹，而是想在项目目录的根目录中创建my-folder-name 文件夹，那么您可以重新定义dest copy 任务中的属性如下：

Gruntfile.js

  // ...

  grunt.initConfig({
    copy: {
      zips: {
        files: [{
          expand: true,
          cwd: 'assets/zip',
          src: '*.zip',
          dest: target // <-----
        }]
      }
    }
  });

  // ...

运行相同的命令：

npm run copy-zips -- --target=my-folder-name

产生以下结果：

.
├── ...
└── my-folder-name
    ├── file1.zip
    ├── file2.zip
    └── file3.zip