গুলপের সাথে ক্রমে কনক্যাট লিপি rip

Question

বলুন, উদাহরণস্বরূপ, আপনি ব্যাকবোন বা যা কিছুতে একটি প্রকল্প তৈরি করছেন এবং আপনাকে একটি নির্দিষ্ট ক্রমে স্ক্রিপ্টগুলি লোড 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তাদের সঠিক অনুক্রমে দিতে, কিন্তু আমি নিশ্চিত যদি আমি ভালো নই।

আমি যেমন আরও জানলাম যে আমি ব্রাউজারফাই একটি দুর্দান্ত সমাধান, এটি প্রথমে ব্যথা হতে পারে তবে এটি দুর্দান্ত।

Comments

আমি উল্লেখ করতে পারি যে এখনকার দিনগুলিতে আমি ব্রাউজরিফাই ব্যবহার করছি। এটির নিজস্ব সামান্য শেখার বক্ররেখার আইএমও রয়েছে। আমি প্রথমে লড়াই করেছি কিন্তু গুলপ ব্রাউজারিফাই হ'ল একটি দুর্দান্ত উপায়! আপনার কোডটি মডুলার হতে দিচ্ছে! আপনি একটি শিমের সাথে অর্ডারটি পরিচালনা করেন, তাই ব্রাউসরিফাই ব্যবহার করার সময় কনকানটেটিং প্রয়োজন হয় না।

— মাইকেল জোসেফ অব্রি

আপনার সমাধান বা কোনও লিঙ্কের জন্য আরও বিশদ দেওয়ার জন্য যত্নশীল?

— দিমিত্রি জায়তসেভ

kroltech.com/2013/12/… এখানে একটি বয়লারপ্লেট প্রকল্পের একটি লিঙ্ক রয়েছে যা আমাকে সত্যিকারের ভাল প্রকল্প পরিচালনার সাথে শুরু করতে সহায়তা করেছিল। এগুলি শেখার পরে আমি আমার প্রকল্পগুলি আরও ভালভাবে পরিচালনা করতে পারি। গিথুব-এ তাঁর প্রকল্প রয়েছে এবং আপনি দেখতে পাচ্ছেন যে তিনি কীভাবে ব্রাউজরিফাই ব্যবহার করেন। ইউটিউব সর্বদা সহায়তা করে এবং অবশ্যই উত্সটি সর্বদা অল্পই বিবেচিত হয় github.com/substack/node-browserify#usage

— মাইকেল জোসেফ

মূলত ধারণাটি requireপ্রান্তের প্রান্তে সিন্ট্যাক্সের মতো এনপিএম ব্যবহার করতে সক্ষম হয় কারণ অবশ্যই যদি আপনি নিজের সার্ভারে এনপিএম ব্যবহার করে থাকেন তবে কীভাবে আপনাকে মডিউলগুলির প্রয়োজন হতে পারে তা দেখতে পেয়েছেন, তবে ব্রাউজারফাই আপনাকে ক্লায়েন্টের পাশের কোডটিতে এটি করার অনুমতি দেয়, রাখুন শুরু করার জন্য এটিতে কিছুটা টিঙ্কিংয়ের প্রয়োজন হয় তবে এটি মূলত প্যাকেজ.জসনের মধ্যে এবং যদি আপনি gulp.js বা grunt.js ব্যবহার করতে চান। যদি আপনি গল্প / গ্রান্ট ব্রাউজারিফাই প্যাকেজটি ইনস্টল করেন আপনি চালাতে gulp/grunt browserifyএবং আপনার স্ক্রিপ্টটিকে একটি প্রধান স্ক্রিপ্টে রূপান্তর করতে পারেন তবে এটি সামান্য শিখনের বক্ররেখার জন্য তবে এটি আইএমওর জন্য মূল্যবান।

— মাইকেল জোসেফ অব্রি

ধন্যবাদ! আসলে মহান নিবন্ধ জুড়ে এসেছিল medium.com/@dickeyxxx/... একটি ভাল পয়েন্ট যে আপনি কি সত্যিই প্রয়োজন হবে না উপার্জন browserifyজন্য Angularমডিউল, যেখানে সহজ সংযুক্তকরণের কাজ শৃঙ্খলা ব্যাপার না :)

— দিমিত্রি Zaitsev

Answer 1

আমার অ্যাংুলারজেএস অ্যাপটি তৈরি করার সময় গ্রান্টের সাথে সম্প্রতি আমার একইরকম সমস্যা হয়েছিল। আমি পোস্ট করা একটি প্রশ্ন এখানে ।

আমি যা করে শেষ করেছি তা হ'ল গ্রুফ্ট কনফিগারেশনে ফাইলগুলিকে স্পষ্টভাবে তালিকাভুক্ত করা। কনফিগারেশন ফাইলটি এর পরে দেখতে পাবেন:

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

গ্রান্ট কোন ফাইলগুলি সদৃশ এবং সেগুলি অন্তর্ভুক্ত না তা নির্ধারণ করতে সক্ষম। একই কৌশল গুল্পের পাশাপাশি কাজ করবে।

Comments

এটি পাশাপাশি উপসর্গ অধীনে কাজ করে। গুল্প ফাইলগুলির পুনরাবৃত্তি করবে না।

— উদ্বিগ্ন

শান্ত ছেলেরা, এই দুটি মাস্টারপিস দুর্দান্ত। আমি কীভাবে চাই তা কাজ করতে অবশেষে আমার gulp.js ফাইলটি সেট আপ করেছি, কিছু এইচটিএমএলতে লিখেছি, ফাইলটি সংরক্ষণ করেছিলাম এবং একটি বোতামের স্পর্শে সেরা ফ্রেমওয়ার্ক এবং ভাল অনুশীলনগুলি দিয়ে নির্মিত কোনও সাইটকে উত্সাহিত করি। প্লাস আপডেটগুলি সহজ হবে, যদি আপনি নিজের প্রয়োজনের একটি ব্যবহার না করেন!

— মাইকেল জোসেফ

হ্যাঁ! আমি সম্প্রতি গ্রান্ট ব্যবহার শুরু করেছি এবং এটি দুর্দান্ত। ব্যাকএন্ড ফ্রেমওয়ার্কগুলির মধ্যে আর জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন এমবেডিং নেই।

— চাদ জনসন

গুল্প আমার প্রচেষ্টায় ফাইলগুলি নকল করে দিচ্ছিল, কিন্তু আমি বুঝতে পেরেছিলাম যে আমার ক্ষেত্রে গুলপ বনাম ফাইল সিস্টেমের ক্ষেত্রে ভিন্ন ছিল, তাই এটি সন্ধান করুন! সঠিক ক্ষেত্রে, গুল্প ফাইলগুলি নকল করবে না।

— ক্রিস

ম্যানুয়াল ক্রম একটি গুরুতর প্রকল্পের দুঃস্বপ্ন। Angularjs এবং অন্যান্যদের জন্য - এখানে বিশেষ ফাইল সর্টর রয়েছে।

— zhekaus

Answer 2

ব্লব ফাইলের পরে যদি কিছু ফাইলের দরকার হয় তবে আপনাকে সাহায্য করবে এমন আরেকটি জিনিস হ'ল আপনার গ্লোব থেকে নির্দিষ্ট ফাইলগুলি বাদ দেওয়া, যেমন:

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

চাদ জনসনের উত্তরে বর্ণিত ফাইলগুলি নির্দিষ্ট করার জন্য আপনি এটি সংযুক্ত করতে পারেন।

Comments

আহ আমি আসলে আপনার পোস্টটি আগে দেখেছি এবং এটি আমাকে srcএবং আমার আপনাকে ইনটেক্সিং কোডটি সাহায্য করেছিল এবং আপনাকে buildআমি সেই সিনট্যাক্সটি ব্যবহার করতে দেখেছি, আমি সেই অংশটি মুছতে শেষ করেছিলাম কারণ আমার ঠিক এটির প্রয়োজন কেন তা নিশ্চিত ছিল না, এখন তা বোঝা যায়।

— মাইকেল জোসেফ

ওহ ঠিক আছে তাই আপনার এখানে শুধু আমাকে আঘাত, foobar.js শেষ করতে পারে না? এটি অন্যভাবে হওয়া উচিত নয়। ['./source/js/*.js', './source/js/**/underscore.js', './source/js/**/!(underscore)*.js']

— মাইকেল জোসেফ

হ্যাঁ, এটি কেবলমাত্র অতিরিক্ত অতিরিক্ত সাহায্য ছিল। আপনার প্রয়োজনীয় অ্যাপ্লিকেশন কোডটি যখন প্রয়োজন হবে বা সমস্ত কিছু লোড হওয়ার পরে আসবে তখন এটি সর্বাধিক কার্যকর। !(foobar)আপনি যদি আগেই কোনও নির্দিষ্ট ফাইল অন্তর্ভুক্ত করেন তবে এটি ( ) ব্যবহার করার কোনও কারণ নেই ।

— উদ্বিগ্ন

একটি কৌণিক জেএস অ্যাপ্লিকেশনের জন্য যেখানে আমার মডিউল সংজ্ঞাগুলি ফাইলগুলিতে থাকে যার নামে 'ড্যাশ নেই', এই গুলপ গ্লোব প্যাটার্ন কাজ করেছে; ['src/app/**/!(*-)*.js', 'src/app/**/*.js']

— স্যাম টি

Answer 3

আমি গুল্প-অর্ডার প্লাগইনটি ব্যবহার করেছি তবে এটি সর্বদা সফল হয় না কারণ আপনি আমার স্ট্যাক ওভারফ্লো পোস্ট গল্প-অর্ডার নোড মডিউল দ্বারা সংহত স্ট্রিমগুলি দ্বারা দেখতে পাচ্ছেন । গুলপ ডক্সের মাধ্যমে ব্রাউজ করার সময় আমি স্ট্রিমিক মডিউল জুড়ে এসেছি যা আমার কেসেটেটিংয়ের ক্রম নির্দিষ্ট করার জন্য বেশ ভাল কাজ করেছে।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);
});

Comments

আরও দেখুন প্রবাহ-সিরিজ । এটি আপনাকে অবজেক্ট মোড নির্দিষ্ট করার প্রয়োজন হবে না এবং গল্প-ইনজেকশন সহ কাজ করবে। আমার উত্তর দেখুন।

— কোডব্লিং

মনে হয় অর্ধেক গুল্প প্লাগইনগুলি কেবল ধারাবাহিকভাবে কাজ করে না (যেমনটি আপনি নির্দেশ করেছেন ঠিক তেমন ক্রম), যা হাহাকারে লজ্জাজনক কারণ গাল্পের আর্কিটেকচারাল ধারণাটি দর্শনীয়, ঠিক এত লোকেরা তাদের প্লাগইনগুলি খারাপভাবে প্রয়োগ করে এবং বজায় রাখে বলে আমি মনে করি ... আমি অন্তর্নিহিত নোড মডিউলগুলি আরও দরকারী তাই এই সমাধানের জন্য থ্যাঙ্কু! দুর্দান্ত কাজ!

— জিমি হোফা 16

ধারাবাহিকতা, ইভেন্ট-স্ট্রিমটি আমার পক্ষে কাজ করেনি, তবে মার্জ 2 প্রত্যাশিত হিসাবে কাজ করেছে npmjs.com/package/ विसর 2

— আলেকজান্ডার শুটউ

Answer 4

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'}));
});

এবং এইচটিএমএলে আপনাকে যে বিল্ড ফাইলটি উত্পন্ন করতে চান তার নামটি এইভাবে প্রকাশ করতে হবে:

<!-- 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>

আপনার বিল্ড ডিরেক্টরিতে আপনার মেইন.মিনি.জেএস এর রেফারেন্স থাকবে যাতে বিক্রেতা.জেএস, টেস্ট.জেএস এবং মেইন.জেস থাকবে contain

Comments

এটি নিখুঁত! অর্ডার সংজ্ঞায়িত করার জন্য আমার যে উত্তরগুলি প্রয়োজন তা আমি ঘৃণা করি! তুমি কি জান? অর্ডারটি এখানে রয়েছে: এইচটিএমএল ফাইলে। নিখুঁত সমাধান.

— আলী ওকে

Answer 5

সাজানোর-স্ট্রীম সাথে ফাইলের নির্দিষ্ট নিশ্চিত করার ব্যবহার করা যেতে পারে 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/'));
});

Comments

আমি আশা করি এই মডিউলটি কাজ করেছে কারণ এটি আমার কাছে সহজ উত্তর বলে মনে হচ্ছে, তবে আমার ক্ষেত্রে যেখানে আমার নামযুক্ত ফাইলের নাম এবং খুব সহজ তুলনা ফাংশন রয়েছে, এটি কার্যকর হয় না।

— জেরেমি জন 15

Answer 6

আমি কেবল ফাইল নামের শুরুতে নম্বরগুলি যুক্ত করেছি:

0_normalize.scss
1_tikitaka.scss
main.scss

এটি কোনও সমস্যা ছাড়াই গোলাপে কাজ করে।

Comments

হ্যাঁ, আমি এটিকে কিছুটা সহজ মনে করি, এর অর্থ হ'ল যদি আপনি আপনার সমস্ত ফাইল উত্পাদনের জন্য সংকলন করেন তবে এটি আপনার ফাইলগুলির বিকাশে নাম রাখায় কোনও পার্থক্য নেই।

— মাইকেল জোসেফ অব্রি

আমি ঠিক খুঁজে পেয়েছি এটি সঠিকভাবে কাজ করে না। 1_xx, 2_xx, 10_xx, 11_xx ব্যবহার করে দেখুন। কমপক্ষে উইন্ডোজ এর অধীনে, এটি হবে 1_xx, 10_xx, 11_xx, 2_xx

— dbinott

ব্যক্তিগতভাবে আমি এই বিবৃতিটির সাথে সম্পূর্ণরূপে একমত নই যে আপনি আপনার ফাইলগুলিকে বিকাশে নাম দিন তা বিবেচ্য নয়। সমস্ত বিকাশটি কম্পিউটার-কেন্দ্রিক নয়, প্রথমে মানব-কেন্দ্রিক হওয়া উচিত। আপনার বিল্ড সরঞ্জামটির সাথে মেলে আপনার ফাইলগুলি পরিবর্তন করা একটি বিল্ড সরঞ্জামের উদ্দেশ্যকে পরাস্ত করে। অন্যদিকে নয়, আপনার প্রকল্পের সাথে মেলে আপনার বিল্ড পরিবর্তন করুন।

— জন হিব

@ জনহাইব একভাবে, আপনার ফাইলকে একটি সংখ্যার সাথে উপরিজ্ঞাপন করা পরবর্তী বিকাশকারীকে প্রতিটি ফাইলের নির্ভরতা জানতে সহায়তা করবে, না? যদি আমি কোনও ফোল্ডার খুলি এবং 1_foo.js, 2_bar.js, 3_বাজ.জেএস দেখতে পাই, আমি সেই ফাইলগুলিকে সেই ক্রমে খুলতে পারি এবং 1_foo.js

— স্ক্রাম

আমি খুঁজে পেয়েছি যে gulp.src async চালায়, যার অর্থ এই যে ডায়ারে প্রক্রিয়া করার জন্য আরও ফাইল রয়েছে এমন ক্ষেত্রে এটি ধারাবাহিকভাবে কাজ করে না।

— জেরেমি জন

Answer 7

আমি আমার স্ক্রিপ্টগুলি প্রতিটি প্যাকেজের জন্য বিভিন্ন ফোল্ডারে সংগঠিত করেছি যা আমি প্যাকেজ থেকে টানতে পারি এবং আমার অ্যাপ্লিকেশনের জন্য আমার নিজস্ব স্ক্রিপ্ট। যেহেতু আপনি এই স্ক্রিপ্টগুলির ক্রমটি কোথাও কোথাও তালিকাভুক্ত করতে চলেছেন, কেন কেবল সেগুলি আপনার গুল্প ফাইলে তালিকাভুক্ত করবেন না? আপনার প্রকল্পে নতুন বিকাশকারীদের জন্য, আপনার স্ক্রিপ্টের শেষ-পয়েন্টগুলি এখানে তালিকাভুক্ত করা ভাল। আপনি 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 এবং বুটস্ট্র্যাপ যোগ করা হয়েছে। সম্ভবত তাদের জন্য সিডিএন ব্যবহার করা আরও ভাল কারণ যেহেতু এগুলি ব্যাপকভাবে ব্যবহৃত হয় এবং ব্রাউজারগুলি তাদের অন্য সাইট থেকে ইতিমধ্যে ক্যাশে রাখতে পারে।

Answer 8

স্ট্রিম-সিরিজ চেষ্টা করুন । এটি মার্জ-স্ট্রিম / ইভেন্ট-স্ট্রিম.মার্জ () এর মতো কাজ করে যা ইন্টারলিভিংয়ের পরিবর্তে শেষ পর্যন্ত যুক্ত হয়। আপনার স্ট্রিমাক্য এর মতো অবজেক্ট মোডটি নির্দিষ্ট করার প্রয়োজন হয় না , তাই আপনার কোডটি ক্লিনার হয়ে আসে।

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'))
});

Answer 9

মার্জ 2 এ মুহূর্তে একমাত্র কার্যকরী এবং রক্ষণাবেক্ষণ আদেশযুক্ত স্ট্রিম মার্জিং সরঞ্জামের মতো দেখায়।

আপডেট 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');

Answer 10

একটি বিকল্প পদ্ধতি হ'ল এই সমস্যার জন্য বিশেষত তৈরি করা একটি গুলপ প্লাগইন ব্যবহার করা। 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

আশাকরি এটা সাহায্য করবে!

Answer 11

আমার জন্য আমার নাইটুয়ালসোর্ট () এবং অ্যাঙ্গুলারফিলসোর্ট () পাইপে ছিল যা ফাইলগুলি পুনরায় সাজিয়ে তুলছিল। আমি এটি সরিয়েছি এবং এখন এটি আমার পক্ষে ভাল কাজ করে

$.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}))

Answer 12

আমি শুধু গুল্প-কৌণিক-ফাইলসোর্ট ব্যবহার করি

function concatOrder() {

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

Comments

ওফ, আমি ঠিক বুঝতে পেরেছি যে আপনি কৌণিক সম্পর্কে জিজ্ঞাসা করছেন না, দুঃখিত

— ম্যাককার্ট 4'16

Answer 13

আমি এমন একটি মডিউল পরিবেশে আছি যেখানে সকলেই কুল ব্যবহার করে মূল-নির্ভরশীল। সুতরাং, coreমডিউলটি অন্যদের আগে সংযুক্ত করা দরকার।

আমি কি করেছিলাম:

1. সমস্ত স্ক্রিপ্ট একটি srcফোল্ডারে সরান
2. কেবল gulp-renameআপনার coreডিরেক্টরিতে_core

3. গুল্প আপনার অর্ডারটি পালন করছে 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"])

যেখানে অ্যাডমিন এবং পণ্য দুটি মডিউল হয়।

Answer 14

আপনি যদি তৃতীয় পক্ষের লাইব্রেরি নির্ভরতাগুলি অর্ডার করতে চান তবে তারযুক্ত চেষ্টা করুন । এই প্যাকেজটি বওয়ার.জেসনে প্রতিটি প্যাকেজ নির্ভরতা পরীক্ষা করে তারপরে সেগুলি আপনার জন্য আপ করে।

Answer 15

আমি এই পৃষ্ঠাটি থেকে বেশ কয়েকটি সমাধানের চেষ্টা করেছি, কিন্তু কোনওটিই কার্যকর হয়নি। আমার কাছে একটি সংখ্যাযুক্ত ফাইল ছিল যা আমি কেবল বর্ণানুক্রমিক ফোল্ডারনাম দ্বারা অর্ডার করতে চেয়েছিলাম তাই যখন পাইপ করা হয় concat()তারা একই ক্রমে থাকত। যে, গ্লোব্বিং ইনপুট ক্রম সংরক্ষণ করুন। সহজ, তাই না?

এখানে আমার সুনির্দিষ্ট প্রুফ-অফ কনসেপ্ট কোডটি দেওয়া হয়েছে ( printকেবলমাত্র ক্লায়েন্টে মুদ্রিত অর্ডারটি দেখার জন্য):

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.map স্ট্রিম আউটপুটটি সঠিকভাবে অর্ডার করার জন্য সূচক দ্বারা বর্ধিত স্লাইডটাইম করে) অ্যাসিঙ্কটি চলছে।

এতে srcআরও বেশি ফাইলের সাথে গড় ডায়ারগুলির async এর আপলোডটি কম ফাইলের সাথে ডায়ারের পরে এসেছিল, কারণ তারা প্রক্রিয়া করতে বেশি সময় নিয়েছিল।

Comments

আপনি কি একটি সিঙ্ক্রোনাস (ভাল, কমপক্ষে ডিটারমিনিস্টিক) বিকল্প খুঁজে পেয়েছেন?

— এলিওটিটিসিবল

Answer 16

আমার গাল্প সেটআপে, আমি প্রথমে বিক্রেতা ফাইলগুলি নির্দিষ্ট করছি এবং তারপরে (আরও সাধারণ) সমস্ত কিছু উল্লেখ করছি, দ্বিতীয়। এবং এটি সফলভাবে অন্য কাস্টম স্টাফগুলির আগে বিক্রেতা জেএসকে সফলভাবে রাখে।

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

Answer 17

দৃশ্যত আপনি gulp.src থেকে "nosort" বিকল্পটি মধ্যে পাস করতে পারেন gulp.src ।