खोज…


ग्रंट और गुलप

ASP.NET Core ऐप में, आप थर्ड पार्टी टूल्स, जैसे कि गल्प और ग्रंट का उपयोग करके डिज़ाइन-टाइम के दौरान क्लाइंट-साइड संसाधनों को बंडल और मिनिमाइज़ करते हैं। डिज़ाइन-टाइम बंडलिंग और मिनिमाइज़ेशन का उपयोग करके, अनुप्रयोग की परिनियोजन से पहले की बनी हुई फ़ाइलें बनाई जाती हैं। तैनाती से पहले बंडलिंग और माइनिंग करना सर्वर के कम लोड का लाभ प्रदान करता है। हालांकि, यह पहचानना महत्वपूर्ण है कि डिजाइन-टाइम बंडलिंग और मिनिफिकेशन से जटिलता बढ़ती है और केवल स्थैतिक फाइलों के साथ काम करता है।

यह ASP.NET कोर में आपके प्रोजेक्ट के भीतर एक gulpfile.js फ़ाइल के माध्यम से गुल को कॉन्फ़िगर करके किया जाता है:

// Defining dependencies
var gulp = require("gulp"),  
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

// Define web root
var webroot = "./wwwroot/"

// Defining paths
var paths = {  
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

// Bundling (via concat()) and minifying (via uglify()) Javascript
gulp.task("min:js", function () {  
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

// Bundling (via concat()) and minifying (via cssmin()) Javascript
gulp.task("min:css", function () {  
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

यह दृष्टिकोण आपकी मौजूदा जावास्क्रिप्ट और सीएसएस फ़ाइलों को क्रमशः निर्देशिका और ग्लोबिंग पैटर्न के अनुसार बंडल करेगा और उनका उपयोग करेगा।

Bundler और Minifier एक्सटेंशन

विजुअल स्टूडियो में एक उपलब्ध बुंडलर और मिनिफ़ायर एक्सटेंशन भी है जो आपके लिए इस प्रक्रिया को संभालने में सक्षम है। विस्तार आपको आसानी से उन फ़ाइलों को चुनने और बंडल करने की अनुमति देता है जो आपको कोड की एक पंक्ति लिखे बिना चाहिए।

अपने बंडलों का निर्माण

एक्सटेंशन इंस्टॉल करने के बाद, आप उन सभी विशिष्ट फ़ाइलों का चयन करते हैं, जिन्हें आप एक बंडल में शामिल करना चाहते हैं और एक्सटेंशन से बंडल और मिनिमाइज़ फाइल्स विकल्प का उपयोग करते हैं:

अपने बंडल का निर्माण

यह आपको अपने बंडल का नाम देने और उसे बचाने के लिए एक स्थान चुनने का संकेत देगा। फिर आपको अपने प्रोजेक्ट के भीतर एक नई फ़ाइल दिखाई देगी, जिसे bundleconfig.json कहा जाता है जो निम्नलिखित की तरह दिखता है:

[
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" 
    ]
  }
]

नोट: जिस क्रम में फ़ाइलों का चयन किया जाता है वह उस क्रम को निर्धारित करेगा जो वे बंडल में दिखाई देते हैं, इसलिए यदि आपके पास कोई निर्भरता है, तो सुनिश्चित करें कि आप इसे ध्यान में रखते हैं।

अपने बंडलों को छोटा करना

अब पिछला चरण बस आपकी फ़ाइलों को बंडल करेगा, यदि आप बंडल को छोटा करना चाहते हैं, तो आपको यह इंगित करना होगा कि बंडललेफ़िग.जसन फ़ाइल के भीतर। यह इंगित करने के लिए कि आप यह चाहते हैं कि आपके मौजूदा बंडल में निम्नलिखित की तरह बस एक minify ब्लॉक जोड़ें:

[
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" 
    ],
    "minify": {
      "enabled": true
    }
  }
]

अपने बंडलों को स्वचालित करें

अंत में, यदि आप इस प्रक्रिया को स्वचालित करना चाहते हैं, तो आप यह सुनिश्चित करने के लिए कि जब भी आपका एप्लिकेशन आपके एप्लिकेशन के भीतर किसी भी परिवर्तन को प्रतिबिंबित करता है, तब आपके द्वारा बनाए गए कार्य को चलाने के लिए कार्य शेड्यूल कर सकता है।

ऐसा करने के लिए, आपको निम्नलिखित कार्य करने होंगे:

  • टास्क रनर एक्सप्लोरर (टूल्स> टास्क रनर एक्सप्लोरर के माध्यम से) खोलें
  • bundleconfig.json नीचे अपडेट ऑल फाइल्स ऑप्शन पर राइट क्लिक करें
  • बाइंडिंग संदर्भ मेनू से अपनी पसंदीदा बाइंडिंग का चयन करें

यहाँ छवि विवरण दर्ज करें

ऐसा करने के बाद, आपके बंडलों को आपके द्वारा चुने गए पसंदीदा चरण में स्वचालित रूप से अपडेट किया जाना चाहिए।

डॉटनेट बंडल कमांड

ASP.NET Core RTM रिलीज़ ने BundlerMinifier.Core पेश BundlerMinifier.Core , एक नया बंडलिंग और न्यूनतम उपकरण जिसे आसानी से मौजूदा ASP.NET कोर अनुप्रयोगों में एकीकृत किया जा सकता है और इसके लिए किसी बाहरी एक्सटेंशन या स्क्रिप्ट फ़ाइलों की आवश्यकता नहीं होती है।

BundlerMinifier.Core का उपयोग करना

इस टूल का उपयोग करने के लिए, केवल BundlerMinifier.Core को अपने मौजूदा project.json के tools सेक्शन के भीतर जोड़ें। नीचे दी गई फाइल के लिए BundlerMinifier.Core फाइल करें:

"tools": {
  "BundlerMinifier.Core": "2.0.238",
  "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
  "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
}

अपने बंडलों को कॉन्फ़िगर करना

उपकरण को जोड़ने के बाद, आपको अपनी परियोजना में एक bundleconfig.json फ़ाइल जोड़ने की आवश्यकता होगी जिसका उपयोग उन फ़ाइलों को कॉन्फ़िगर करने के लिए किया जाएगा जिन्हें आप अपने बंडलों में शामिल करना चाहते हैं। न्यूनतम कॉन्फ़िगरेशन नीचे देखा जा सकता है:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/semantic.validation.min.js",
    "inputFiles": [
      "wwwroot/js/semantic.validation.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

बंडलों का निर्माण / अद्यतन करना

आपके बंडलों को कॉन्फ़िगर करने के बाद, आप निम्न कमांड के माध्यम से अपनी मौजूदा फ़ाइलों को बंडल और छोटा कर सकते हैं:

dotnet bundle

स्वचालित बंडलिंग

बंडलिंग और न्यूनतम प्रक्रिया को आपके मौजूदा project.json प्रैम्पाइल सेक्शन में डॉटनेट dotnet bundle कमांड को जोड़कर बिल्ड प्रक्रिया के भाग के रूप में स्वचालित किया जा सकता है। जेसन फाइल:

"scripts": {
  "precompile": [
    "dotnet bundle"
  ]
}

उपलब्ध कमांड्स

आप नीचे उपलब्ध सभी आदेशों और उनके विवरणों की एक सूची देख सकते हैं:

  • डॉटनेट बंडल - अपनी निर्दिष्ट फ़ाइलों को बंडल करने और उन्हें छोटा करने के लिए bundleconfig.json फ़ाइल का उपयोग करके बंडल कमांड को निष्पादित करता है।
  • डॉटनेट बंडल क्लीन - डिस्क से मौजूदा आउटपुट फ़ाइलों के सभी को साफ करता है।
  • डॉटनैट घड़ी बंडल - एक पर नजर रखने वालों कि स्वचालित रूप से चलेंगे बनाता है dotnet bundle जब भी से एक मौजूदा इनपुट फ़ाइल bundleconfig.json विन्यास अपनी फ़ाइलें बंडल करने।
  • डॉटनेट बंडल मदद - कमांड-लाइन इंटरफ़ेस का उपयोग करने के लिए सभी उपलब्ध सहायता विकल्पों और निर्देशों को प्रदर्शित करता है।


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow