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文件一样命名，但cause的扩展名除外。

Answer 1

所以我必须自己弄清楚，但是我认为这绝对不是最好的解决方案。

首先，我不知道如何遍历JSON文件并使用其内容，因此我需要使用一个捆绑的JSON文件。

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

有了这个，我可以迭代键，并将路径添加到每个节的文件名中，创建一个数组，将其交给gulp-concat。

const master = JSON.parse( fs.readFileSync( './package.json' ) );
const jsBundles = JSON.parse( fs.readFileSync( './assets/js/_bundles.json' ) );

…

function prepareBundle( key )
{
    var result = [];
    if ( typeof( jsBundles[ key ].lib ) !== 'undefined' )
    {
        for ( var i in jsBundles[ key ].lib)
        {
            result.push( './node_modules/' + jsBundles[ key ].lib[ i ] );
        }
    }

    if ( typeof( jsBundles[ key ].src ) !== 'undefined' )
    {
        for ( var i in jsBundles[ key ].src)
        {
            result.push(  master.config.jsSrc + jsBundles[ key ].src[ i ] );
        }
    }

    return result;
}

function createBundle( files, filename )
{
    return src( files )
        .pipe( concat( filename + '.js' ) )
        .pipe( dest( master.config.jsDist ) );
}

function javascripts( done )
{
    for ( var key in jsBundles )
    {
        ( function( key )
        {
            var files = prepareBundle( key );
            process.stdout.write( 'creating bundle: ' + key + '\n' );
            createBundle( files, key );
        })( key );
    }
    done();
}

Answer 2

我认为下面有一些技巧对您有用。特别是glob.sync，请参见glob documentation

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

用gulp连接JSON文件中的JS包

2 个答案: