node.js - 使用 gulp 连接来自 JSON 文件的 JS 包

Question

在 gulp 和 node 的情况下，我更像是用户而不是开发人员。所以我希望在这里找到一些建议。

我有几个 JSON 文件。每个都定义了一组 JS 文件。我想使用 gulp 或 npm 脚本来循环 JSON 文件并将其中列出的文件连接到 JS 文件。

示例 JSON 文件：

{
    "lib": [
        "choices.js/public/assets/scripts/choices.min.js"
    ],
    "src": [
        "base.js",
        "address.js"
    ]
}

要连接的文件的结果列表应如下所示：

[
    './node_modules/choices.js/public/assets/scripts/choices.min.js',
    './assets/js/src/base.js',
    './assets/js/src/address.js'
]

生成的 JS 文件应存储在 './dist/js/' 中，并像原始 JSON 文件一样命名，除了原因的扩展名。

标签： node.jsjsongulpnpm-scripts

Answer 1

我认为下面的一些技巧对你很有用。特别是glob.sync，请参阅glob 文档

const gulp = require("gulp");
const glob = require("glob");
const concat = require("gulp-concat");
const path = require("path");

// returns an array, assumes files are named "_something.json"
const jsonFiles = glob.sync("assets/js/_*.json");


function concatJSONfiles(done) {

  jsonFiles.forEach(jsonFile => {
    let array2Concat = [];

    const concatName = path.format({
      name: path.basename(jsonFile, ".json"),
      ext: ".js"
    });
    // concatName = "_bundle1.js", "_bumdle2.js", etc.

    const thisFile = require(path.join(__dirname, jsonFile));  // get and parse each _bundle<n>.json

    // build the array for gulp.src from each key in the _bundle.json's
    // if more than the two specified keys ("lib" and "src") just loop through them all
    // with the array returned from Objeect.keys(thisFile);

    thisFile.lib.forEach(item => array2Concat.push(path.join(".", "node_modules", item)));
    thisFile.src.forEach(item => array2Concat.push(path.join(".", "assets", "js", item)));

    return gulp.src(array2Concat)
      .pipe(concat(concatName))
      .pipe(gulp.dest("dist/js"));    
  });
  done();
};

module.exports.concat = concatJSONfiles; 

我正在使用这个文件夹结构：

├── assets
|  └── js
|     ├── address1.js
|     ├── address2.js
|     ├── base1.js
|     ├── base2.js
|     ├── _bundle1.json
|     └── _bundle2.json
├── gulpfile.js
└── node_modules
   └── choices.js
      └── public
         └── assets
            └── scripts
               └── choices.min.js

并生产：

├── dist
|  └── js
|     ├── _bundle1.js
|     └── _bundle2.js