Объединение пакетов JS из файлов JSON с помощью gulp - PullRequest
Новая
       13

Объединение пакетов JS из файлов JSON с помощью gulp

0 голосов
/ 27 июня 2019

В случае с 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, за исключением расширения причины.

Ответы [ 2 ]

0 голосов
/ 07 июля 2019

Я думаю, что в следующем есть несколько техник, которые вы найдете полезными. В частности glob.sync, см. глобальная документация 

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
0 голосов
/ 28 июня 2019

Так что мне пришлось самому в этом разобраться, но я думаю, что это определенно не лучшее решение.

Прежде всего, я понятия не имел, как перебирать файлы 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();
}
...