गूंथ लिपियों के क्रम में स्क्रिप्ट


192

उदाहरण के लिए, आप बैकबोन या जो कुछ भी पर एक परियोजना का निर्माण कर रहे हैं और आपको एक निश्चित क्रम में स्क्रिप्ट लोड करने की आवश्यकता है, जैसे underscore.jsपहले लोड करने की आवश्यकता है backbone.js

मैं इसे स्क्रिप्ट्स को कैसे प्राप्त कर सकता हूं ताकि वे क्रम में हों?

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
    gulp.src(['./source/js/*.js', './source/js/**/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/js/'));
});

मेरे पास लिपियों का सही क्रम है source/index.html, लेकिन चूंकि फाइलें वर्णानुक्रम से व्यवस्थित की जाती हैं, इसलिए underscore.jsबाद में गपशप हो जाएगी backbone.js, और मेरे लिए लिपियों का क्रम source/index.htmlमायने नहीं रखता है, यह निर्देशिका में फाइलों को देखता है।

तो क्या किसी को इस पर एक विचार है?

बेस्ट विचार मेरे पास है के साथ विक्रेता स्क्रिप्ट नाम बदलने के लिए है 1, 2, 3उन्हें उचित क्रम देने के लिए है, लेकिन मुझे यकीन है कि अगर मैं इस तरह नहीं कर रहा हूँ।

जैसा कि मैंने और अधिक जान लिया मैंने पाया कि ब्राउजराइज़ एक महान समाधान है, यह पहली बार में दर्द हो सकता है लेकिन यह बहुत अच्छा है।


4
मैं उल्लेख कर सकता हूं कि अब मैं एक दिन ब्राउज़र का उपयोग कर रहा हूं। यह अपने स्वयं के छोटे सीखने की अवस्था IMO है। मैं पहली बार में संघर्ष किया लेकिन gulp ब्राउजर जाने का एक अच्छा तरीका है! अपने कोड को मॉड्यूलर करना आप एक शिम में आदेश को संभालते हैं, इसलिए ब्राउजर का उपयोग करते समय कंक्रीटिंग आवश्यक नहीं है।
माइकल जोसेफ ऑब्री

अपने समाधान या एक लिंक के लिए अधिक जानकारी देने के लिए देखभाल?
दिमित्री ज़ैतसेव

kroltech.com/2013/12/… यहाँ एक बॉयलरप्लेट परियोजना का लिंक दिया गया है जिसने वास्तव में मुझे अच्छी परियोजना प्रबंधन के साथ आरंभ करने में मदद की है। यह सब सीखने के साथ पीड़ित होने के बाद मैं अपनी परियोजनाओं को बेहतर तरीके से प्रबंधित कर सकता हूं। उसके पास गितुब पर परियोजना है और आप देख सकते हैं कि वह कैसे ब्राउज़र का उपयोग करता है। Youtube हमेशा मदद करता है और निश्चित रूप से स्रोत हमेशा ही कम करके आंका जाता है github.com/substack/node-browserify#usage
माइकल जोसफ ऑब्री

मूल रूप से विचार npm का उपयोग करने में सक्षम है जैसे वाक्य रचना के साथ requireसामने के छोर पर क्योंकि अगर आपने अपने सर्वर साइड पर npm का उपयोग किया है तो आप देखते हैं कि आपको मॉड्यूल की आवश्यकता कैसे हो सकती है, लेकिन ब्राउजर आपको क्लाइंट साइड कोड पर ऐसा करने की अनुमति देता है, शुरू करने के लिए ध्यान में रखते हुए इसे थोड़ा सा छेड़छाड़ की आवश्यकता होती है, लेकिन यह मुख्य रूप से package.json के अंदर है और यदि आप gulp.js या grunt.js के साथ उपयोग करना चाहते हैं। यदि आप gulp / ग्रन्ट ब्राउज़राइज़ पैकेज स्थापित करते हैं, तो आप gulp/grunt browserifyअपनी स्क्रिप्ट को एक मुख्य स्क्रिप्ट में चला सकते हैं और चालू कर सकते हैं , यह एक मामूली सीखने की अवस्था है, लेकिन इसके लायक IMO है।
माइकल जोसेफ ऑब्री

धन्यवाद! असल में मैं महान लेख भर में आया था medium.com/@dickeyxxx/... एक अच्छा मुद्दा यह है कि क्या तुम सच में की जरूरत नहीं है बनाने browserifyके लिए Angularमॉड्यूल, जहां सरल संयोजन काम करता है और क्रम आवश्यक नहीं है :)
दमित्री Zaitsev

जवाबों:


199

मुझे अपने AngularJS ऐप के निर्माण के दौरान हाल ही में ग्रंट के साथ एक समान समस्या थी। यहाँ एक सवाल मैंने पोस्ट किया है।

मैंने जो काम किया वह ग्रंट कॉन्फिगरेशन में फाइलों को स्पष्ट रूप से सूचीबद्ध करने के लिए है। फिर विन्यास फाइल इस तरह दिखाई देगी:

[
  '/path/to/app.js',
  '/path/to/mymodule/mymodule.js',
  '/path/to/mymodule/mymodule/*.js'
]

ग्रंट यह पता लगाने में सक्षम है कि कौन सी फाइलें डुप्लिकेट हैं और उन्हें शामिल नहीं किया गया है। गुलप के साथ भी यही तकनीक काम करेगी।


74
यह ठीक वैसे ही गल के नीचे काम करता है। या तो फ़ाइलों को दोहराना नहीं होगा।
अति उत्साही

1
कूल लोग, ये दोनों कृति कमाल की हैं। मैं अंत में अपनी gulp.js फ़ाइल को सेट करने के लिए काम करता हूं कि मैं कैसे चाहता हूं, कुछ HTML में लिखा गया है, फ़ाइल को बचाया और एक बटन के स्पर्श में सबसे अच्छी रूपरेखा और अच्छी प्रथाओं के साथ बनाई गई साइट को उछाल दिया। प्लस अपडेट आसान होगा, यदि आप किसी एक का उपयोग नहीं कर रहे हैं तो आपको इसकी आवश्यकता है!
माइकल जोसेफ ऑबरी

1
हाँ! मैंने हाल ही में ग्रंट का उपयोग करना शुरू किया, और यह बहुत बढ़िया है। बैकएंड फ्रेमवर्क के अंदर कोई और एम्बेडिंग जावास्क्रिप्ट एप्लिकेशन नहीं है।
चाड जॉनसन

3
मेरे प्रयास में गुल डुप्लिकेट फ़ाइलों की नकल कर रहा था, लेकिन मुझे एहसास हुआ कि मुझे gulp बनाम फ़ाइल सिस्टम में मामला अलग था, इसलिए इसके लिए बाहर देखो! सटीक स्थिति के साथ, gulp फ़ाइलों की नकल नहीं करेगा।
क्रिस

2
एक गंभीर परियोजना में मैनुअल ऑर्डरिंग एक बुरा सपना है। विशेष फ़ाइल सॉर्टर्स हैं - कोणीयरज और अन्य के लिए।
झकौस

135

एक और चीज़ जो मदद करती है अगर आपको फ़ाइलों की एक बूँद के बाद आने के लिए कुछ फ़ाइलों की आवश्यकता होती है , तो अपने ग्लोब से विशिष्ट फ़ाइलों को बाहर करना है, जैसे:

[
  '/src/**/!(foobar)*.js', // all files that end in .js EXCEPT foobar*.js
  '/src/js/foobar.js',
]

आप इसे उन निर्दिष्ट फाइलों के साथ जोड़ सकते हैं जिन्हें चाड जॉनसन के उत्तर में पहले बताया गया है।


आह, मैंने वास्तव में आपके पोस्ट को पहले देखा था और इससे मुझे अपने कोड को इंजेक्ट करने में मदद मिली srcऔर मेरे द्वारा buildमैंने आपको उस सिंटैक्स का उपयोग करते हुए देखा, मैंने उस हिस्से को मिटा दिया क्योंकि मुझे यकीन नहीं था कि मुझे इसकी आवश्यकता क्यों थी, अब समझ में आता है।
माइकल जोसेफ ऑबरी

ओह ठीक है तो यहाँ आपकी बात सिर्फ मुझे लगी, क्या वो फ़ॉबर नहीं बना पाएगा? यह दूसरा रास्ता नहीं होना चाहिए। ['./source/js/*.js', './source/js/**/underscore.js', './source/js/**/!(underscore)*.js']
माइकल जोसेफ ऑबरी

हाँ, यह सिर्फ मदद का एक अतिरिक्त सा था। जब आपको ज़रूरत हो या जो कुछ और लोड हो, उसके बाद आपका कोर एप्लीकेशन कोड आना सबसे उपयोगी है। !(foobar)यदि आपने किसी विशिष्ट फ़ाइल को पहले से शामिल कर लिया है, तो इसका उपयोग करने का कोई कारण नहीं है ।
अधकचरा

एक AngularJS एप्लिकेशन के लिए जहां मेरे मॉड्यूल की परिभाषाएं उन फाइलों में रहती हैं, जिनके नाम में 'कोई डैश' नहीं है, इस गल्प ग्लोब पैटर्न ने काम किया है; ['src/app/**/!(*-)*.js', 'src/app/**/*.js']
सैम टी

17

मैंने gulp- ऑर्डर प्लगइन का उपयोग किया है, लेकिन यह हमेशा सफल नहीं होता है क्योंकि आप मेरी स्टैक ओवरफ़्लो पोस्ट gulp- ऑर्डर नोड मॉड्यूल को मर्ज किए गए स्ट्रीम के साथ देख सकते हैं । जब गुल्फ डॉक्स के माध्यम से ब्राउज़ करते हुए मैं स्ट्रीमक मॉड्यूल के पार आया, जिसने मेरे मामले के क्रम में निर्दिष्ट करने के लिए काफी अच्छी तरह से काम किया है। https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

इसका उपयोग मैंने कैसे किया, इसका उदाहरण नीचे है

var gulp         = require('gulp');
var concat       = require('gulp-concat');
var handleErrors = require('../util/handleErrors');
var streamqueue  = require('streamqueue');

gulp.task('scripts', function() {
    return streamqueue({ objectMode: true },
        gulp.src('./public/angular/config/*.js'),
        gulp.src('./public/angular/services/**/*.js'),
        gulp.src('./public/angular/modules/**/*.js'),
        gulp.src('./public/angular/primitives/**/*.js'),
        gulp.src('./public/js/**/*.js')
    )
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./public/build/js'))
        .on('error', handleErrors);
});

धारा-श्रृंखला भी देखें । इसके लिए आपको ऑब्जेक्ट मोड को निर्दिष्ट करने की आवश्यकता नहीं है, और गुल-इंजेक्शन के साथ काम करता है। मेरा जवाब देखिए।
कोडबेलिंग

ऐसा लगता है कि आधे gulp प्लगइन्स बस लगातार काम नहीं करते हैं (जैसे कि जैसा आपने बताया आदेश), जो एक रोने वाली शर्म है क्योंकि gulp की वास्तुशिल्प अवधारणा शानदार है, बस इतने सारे लोग अपने प्लगइन्स को लागू करने और बनाए रखने में खराब हैं, मुझे लगता है ... मुझे लगता है कि अंतर्निहित नोड मॉड्यूल इस समाधान के लिए अधिक उपयोगी हैं! बहुत अच्छा काम करता है!
जिम्मी हॉफ

1
स्ट्रीमक्यू, इवेंट-स्ट्रीम मेरे लिए काम नहीं किया, लेकिन मर्ज 2 ने अपेक्षित रूप से काम किया npmjs.com/package/merge2
अलेक्जेंडर शटौ

12

Gulp-useref के साथ आप अपनी अनुक्रमणिका फ़ाइल में घोषित प्रत्येक स्क्रिप्ट को उस क्रम में संक्षिप्त कर सकते हैं, जिस क्रम में आप उसे घोषित करते हैं।

https://www.npmjs.com/package/gulp-useref

var $ = require('gulp-load-plugins')();
gulp.task('jsbuild', function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});
  return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

और HTML में आपको उस बिल्ड फ़ाइल का नाम घोषित करना होगा जिसे आप उत्पन्न करना चाहते हैं, जैसे:

<!-- build:js js/main.min.js -->
    <script src="js/vendor/vendor.js"></script>
    <script src="js/modules/test.js"></script>
    <script src="js/main.js"></script>

अपनी बिल्ड डायरेक्टरी में आपके पास main.min.js का सन्दर्भ होगा, जिसमें वेंडर। js, test.js और main.js होंगे।


2
यह पूर्ण है! मुझे उन उत्तरों से नफरत थी जहाँ मुझे आदेश को परिभाषित करने की आवश्यकता थी! आपको पता है कि? आदेश वहाँ है: HTML फ़ाइल में। सही समाधान।
अली ओके

6

तरह-धारा भी साथ फ़ाइलों के विशिष्ट सुनिश्चित करने के लिए इस्तेमाल किया जा सकता gulp.src। नमूना कोड जो backbone.jsहमेशा प्रक्रिया के लिए अंतिम फ़ाइल के रूप में रखता है:

var gulp = require('gulp');
var sort = require('sort-stream');
gulp.task('scripts', function() {
gulp.src(['./source/js/*.js', './source/js/**/*.js'])
  .pipe(sort(function(a, b){
    aScore = a.path.match(/backbone.js$/) ? 1 : 0;
    bScore = b.path.match(/backbone.js$/) ? 1 : 0;
    return aScore - bScore;
  }))
  .pipe(concat('script.js'))
  .pipe(stripDebug())
  .pipe(uglify())
  .pipe(gulp.dest('./build/js/'));
});

काश यह मॉड्यूल काम करता क्योंकि यह मेरे लिए सबसे सरल उत्तर की तरह लगता है, लेकिन मेरे मामले में, जहाँ मैंने फ़ाइल नाम और बहुत ही सरलता से तुलनात्मक कार्य किया है, यह काम नहीं करता है।
जेरेमी जॉन

5

मैं सिर्फ फ़ाइल नाम की शुरुआत में नंबर जोड़ता हूं:

0_normalize.scss
1_tikitaka.scss
main.scss

यह बिना किसी समस्या के गल्प में काम करता है।


1
हाँ, मुझे यह थोड़ा आसान लगता है, मेरा मतलब है कि अगर आप उत्पादन के लिए अपनी सभी फाइलों को संकलित कर रहे हैं तो इससे कोई फर्क नहीं पड़ता कि आप अपनी फ़ाइलों को विकास में नाम देते हैं।
माइकल जोसेफ ऑबरी

2
मुझे अभी पता चला है कि यह सही ढंग से काम नहीं करता है। 1_xx, 2_xx, 10_xx, 11_xx का उपयोग करके देखें। विंडोज के तहत कम से कम, यह 1_xx, 10_xx, 11_xx, 2_xx
dbinott

17
व्यक्तिगत रूप से मैं इस कथन से पूरी तरह असहमत हूं कि इससे कोई फर्क नहीं पड़ता कि आप विकास में अपनी फाइलों का नाम क्या रखते हैं। सभी विकास मानव-केंद्रित होना चाहिए, न कि कंप्यूटर-केंद्रित। अपने बिल्ड टूल से मिलान करने के लिए अपनी फ़ाइलों को बदलना एक बिल्ड टूल के उद्देश्य को पराजित करता है। अपने प्रोजेक्ट से मिलान करने के लिए अपना निर्माण बदलें, न कि दूसरे तरीके से।
जॉन हाईब

2
@JonHieb एक तरह से, आपकी फ़ाइलों को एक नंबर के साथ उपसर्ग करने से भी अगले डेवलपर को प्रत्येक फ़ाइल की निर्भरता जानने में मदद मिलेगी, नहीं? अगर मैं एक फोल्डर खोलता हूं और 1_foo.js, 2_bar.js, 3_baz.js देखता हूं, तो मैं उस क्रम में उन फाइलों को खोलूंगा, और 1_foo.js पर कोड पढ़ना शुरू कर दूंगा
sqram 15/16

मैंने पाया है कि gulp.src async चलाता है, जिसका अर्थ है कि यह उन मामलों में लगातार काम नहीं करता है जहां एक dir में प्रक्रिया करने के लिए अधिक फाइलें हैं।
जेरेमी जॉन

5

मेरे पास मेरी स्क्रिप्ट है जो प्रत्येक पैकेज के लिए अलग-अलग फ़ोल्डरों में आयोजित की जाती है जिसे मैं बोवर से खींचता हूं, साथ ही अपने ऐप के लिए मेरी अपनी स्क्रिप्ट। चूंकि आप इन लिपियों के क्रम को कहीं और सूचीबद्ध करने जा रहे हैं, तो क्यों न आप इन्हें अपने gulp फ़ाइल में सूचीबद्ध करें? आपके प्रोजेक्ट पर नए डेवलपर्स के लिए, यह अच्छा है कि आपके सभी स्क्रिप्ट एंड-पॉइंट यहां सूचीबद्ध हैं। आप इसे gulp-add-src के साथ कर सकते हैं :

gulpfile.js

var gulp = require('gulp'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    addsrc = require('gulp-add-src'),
    sourcemaps = require('gulp-sourcemaps');

// CSS & Less
gulp.task('css', function(){
    gulp.src('less/all.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(sourcemaps.write('source-maps'))
        .pipe(gulp.dest('public/css'));
});

// JS
gulp.task('js', function() {
    gulp.src('resources/assets/bower/jquery/dist/jquery.js')
    .pipe(addsrc.append('resources/assets/bower/bootstrap/dist/js/bootstrap.js'))
    .pipe(addsrc.append('resources/assets/bower/blahblah/dist/js/blah.js'))
    .pipe(addsrc.append('resources/assets/js/my-script.js'))
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('source-maps'))
    .pipe(gulp.dest('public/js'));
});

gulp.task('default',['css','js']);

नोट: jQuery और बूटस्ट्रैप आदेश के प्रदर्शन प्रयोजनों के लिए जोड़ा गया। शायद उन लोगों के लिए सीडीएन का उपयोग करना बेहतर है क्योंकि वे बहुत व्यापक रूप से उपयोग किए जाते हैं और ब्राउज़र उन्हें पहले से ही अन्य साइटों से कैश कर सकते हैं।


3

स्ट्रीम-सीरीज़ आज़माएं । यह मर्ज-स्ट्रीम / इवेंट -स्ट्रीम. merge () को छोड़कर काम करता है, सिवाय इसके कि इंटरलेइंग के बजाय, यह अंत तक जुड़ता है । इसमें आपको स्ट्रीमकूट जैसी ऑब्जेक्ट मोड निर्दिष्ट करने की आवश्यकता नहीं है , इसलिए आपका कोड क्लीनर से बाहर आता है।

var series = require('stream-series');

gulp.task('minifyInOrder', function() {
    return series(gulp.src('vendor/*'),gulp.src('extra'),gulp.src('house/*'))
        .pipe(concat('a.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dest'))
});

2

merge2 एकमात्र काम करने वाला और अनुरक्षित ऑर्डर मर्जिंग टूल है।

अद्यतन 2020

एपीआई हमेशा बदलते रहते हैं, कुछ पुस्तकालय अनुपयोगी हो जाते हैं या उनमें कमजोरियां होती हैं, या उनकी निर्भरता में कमजोरियां होती हैं, जो वर्षों से तय नहीं होती हैं। पाठ फ़ाइलों में हेरफेर के लिए आप बेहतर एनओपीजेएस लिपियों और लोकप्रिय पुस्तकालयों का उपयोग करेंगे जैसे कि globbyऔर fs-extraअन्य पुस्तकालयों के साथ-साथ गुल्प, ग्रंट , आदि रैपर।

import globby from 'globby';
import fs from 'fs-extra';

async function bundleScripts() {
    const rootPaths = await globby('./source/js/*.js');
    const otherPaths = (await globby('./source/**/*.js'))
        .filter(f => !rootFiles.includes(f));
    const paths = rootPaths.concat(otherPaths);

    const files = Promise.all(
        paths.map(
            // Returns a Promise
            path => fs.readFile(path, {encoding: 'utf8'})
        )
    );

    let bundle = files.join('\n');
    bundle = uglify(bundle);
    bundle = whatever(bundle);
    bundle = bundle.replace(/\/\*.*?\*\//g, '');

    await fs.outputFile('./build/js/script.js', bundle, {encoding: 'utf8'});
}

bundleScripts.then(() => console.log('done');

1

एक वैकल्पिक विधि इस समस्या के लिए विशेष रूप से बनाए गए एक गुल प्लगइन का उपयोग करना है। https://www.npmjs.com/package/gulp-ng-module-sort

यह आपको इस तरह से जोड़कर अपनी स्क्रिप्ट को सॉर्ट करने की अनुमति देता है .pipe(ngModuleSort()):

var ngModuleSort = require('gulp-ng-module-sort');
var concat = require('gulp-concat');

gulp.task('angular-scripts', function() {
    return gulp.src('./src/app/**/*.js')
        .pipe(ngModuleSort())
        .pipe(concat('angularAppScripts.js))
        .pipe(gulp.dest('./dist/));
});

एक निर्देशिका सम्मेलन मानकर:

|——— src/
|   |——— app/
|       |——— module1/
|           |——— sub-module1/
|               |——— sub-module1.js
|           |——— module1.js
|       |——— module2/
|           |——— sub-module2/
|               |——— sub-module2.js
|           |——— sub-module3/
|               |——— sub-module3.js
|           |——— module2.js
|   |——— app.js

उम्मीद है की यह मदद करेगा!


1

मेरे लिए मेरे पास पाइप में natualSort () और angularFileSort () था जो फाइलों को पुनः व्यवस्थित कर रहा था। मैंने इसे हटा दिया और अब यह मेरे लिए ठीक काम करता है

$.inject( // app/**/*.js files
    gulp.src(paths.jsFiles)
      .pipe($.plumber()), // use plumber so watch can start despite js errors
      //.pipe($.naturalSort())
      //.pipe($.angularFilesort()),
    {relative: true}))

1

मैं सिर्फ gulp-angular-filesort का उपयोग करता हूं

function concatOrder() {

    return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));
}

उफ़, मुझे एहसास हुआ कि आप कोणीय, खेद के बारे में नहीं पूछ रहे थे
Maccurt

0

मैं एक मॉड्यूल environnement में हूँ जहाँ सभी gulp का उपयोग करते हुए कोर-आश्रित हैं। ऐसाcore मॉड्यूल को दूसरों के सामने संलग्न करने की आवश्यकता है।

मैंने क्या किया:

  1. सभी स्क्रिप्ट्स को किसी srcफ़ोल्डर में ले जाएं
  2. बस gulp-renameआपकी coreनिर्देशिका_core
  3. gulp आपके आदेश का पालन कर रहा है gulp.src, मेरा कंकट srcइस तरह दिखता है:

    concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']

यह स्पष्ट _रूप से सूची (प्राकृतिक प्रकार?) से पहली निर्देशिका के रूप में ले जाएगा ।

नोट (एंगुलरज): मैं तब गतिशील रूप से मॉड्यूल को जोड़ने के लिए गल्प-कोणीय-एक्सटेंडर का उपयोग करता हूं core। संकलित यह इस तरह दिखता है:

angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])

जहाँ Admin और Products दो मॉड्यूल हैं।


0

यदि आप तीसरे पक्ष के पुस्तकालयों पर निर्भरता का आदेश देना चाहते हैं, तो वायर्डेप की कोशिश करें । यह पैकेज मूल रूप से bower.json में प्रत्येक पैकेज की निर्भरता की जांच करता है और फिर उन्हें आपके लिए वायर करता है।


0

मैंने इस पृष्ठ से कई समाधानों की कोशिश की, लेकिन किसी ने काम नहीं किया। मेरे पास गिने हुए फाइलों की एक श्रंखला थी, जिन्हें मैं केवल वर्णमाला फ़ोल्डर नाम से आदेशित करना चाहता था, ताकि जब concat()वे उसी क्रम में होंगे यही है, ग्लोबिंग इनपुट के आदेश को संरक्षित करें। आसान है, है ना?

यहाँ मेरा विशिष्ट प्रूफ-ऑफ-कांसेप्ट कोड है ( printकेवल cli पर मुद्रित ऑर्डर देखने के लिए है):

var order = require('gulp-order');
var gulp = require('gulp');
var print = require('gulp-print').default;

var options = {};

options.rootPath = {
  inputDir: process.env.INIT_CWD + '/Draft',
  inputGlob: '/**/*.md',
};

gulp.task('default', function(){
  gulp.src(options.rootPath.inputDir + options.rootPath.inputGlob, {base: '.'})
    .pipe(order([options.rootPath.inputDir + options.rootPath.inputGlob]))
    .pipe(print());
});

के पागलपन का कारण gulp.src? मैंने निर्धारित किया कि gulp.srcजब मैं एक sleep()फ़ंक्शन ( a का उपयोग कर रहा था) का उपयोग करने के लिए async चल रहा था.map अनुक्रमणिका द्वारा क्रमिक वृद्धि के साथ) का उपयोग करके स्ट्रीम आउटपुट को ठीक से ऑर्डर ।

मीनिंग ऑफ एस्सिंक ऑफ़ srcमीन मीनिंग इन विथ मोर फाइल्स विथ कम फाइल्स विथ थे, क्योंकि वे प्रोसेस होने में अधिक समय लेते थे।


1
क्या आपको एक तुल्यकालिक (अच्छी तरह से, कम से कम नियतात्मक) विकल्प मिला?
ELLIOTTCABLE

0

अपने gulp सेटअप में, मैं पहले विक्रेता की फाइलों को निर्दिष्ट कर रहा हूं और फिर (अधिक सामान्य) सब कुछ, दूसरा निर्दिष्ट कर रहा हूं। और यह सफलतापूर्वक अन्य कस्टम सामान से पहले विक्रेता जेएस डालता है।

gulp.src([
  // vendor folder first
  path.join(folder, '/vendor/**/*.js'),
  // custom js after vendor
  path.join(folder, '/**/*.js')
])    

0

जाहिरा तौर पर आप "nosort" विकल्प में gulp.src gulp.src पास कर सकते हैं ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.