Grunt.js (0.3.x) के साथ कई सीएसएस और जावास्क्रिप्ट फ़ाइलों को संक्षिप्त और छोटा कैसे करें

Question

नोट: यह प्रश्न केवल ग्रंट 0.3.x के लिए प्रासंगिक है और इसे संदर्भ के लिए छोड़ दिया गया है। नवीनतम ग्रंट 1.x रिलीज़ की मदद के लिए कृपया इस प्रश्न के नीचे मेरी टिप्पणी देखें।

मैं वर्तमान में पहली बार समवर्ती और फिर सीएसएस और जावास्क्रिप्ट फ़ाइलों को छोटा करने के लिए एक स्वचालित निर्माण प्रक्रिया को सेटअप करने के लिए Grunt.js का उपयोग करने की कोशिश कर रहा हूं।

मैं अपनी जावास्क्रिप्ट फ़ाइलों को सफलतापूर्वक संक्षिप्त और संक्षिप्त करने में सक्षम रहा हूं, हालांकि हर बार जब मैं ग्रंट चलाता हूं तो लगता है कि यह उन्हें अधिलेखित करने के बजाय केवल फ़ाइल में संलग्न करना होगा।

जैसा कि सीएसएस को संक्षिप्त या संक्षिप्त करने के लिए, मैं अभी तक ऐसा करने में असमर्थ रहा हूँ!

ग्रन्ट सीएसएस मॉड्यूल के संदर्भ में मैंने उपयोग करने की कोशिश की है consolidate-css, grunt-cssऔर cssminकोई फायदा नहीं हुआ। कैसे उपयोग करने के लिए चारों ओर मेरे सिर नहीं मिल सकता है!

मेरी निर्देशिका संरचना इस प्रकार है (एक विशिष्ट नोड। जेएस अनुप्रयोग):

• app.js
• grunt.js
• /public/index.html
• / सार्वजनिक / सीएसएस / [विभिन्न सीएसएस फाइलें]
• / सार्वजनिक / जेएस / [विभिन्न जावास्क्रिप्ट फाइलें]

यहाँ मेरा grunt.js फ़ाइल है जो वर्तमान में मेरे आवेदन के मूल फ़ोल्डर में दिखता है:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    concat: {
      dist: {
        src: 'public/js/*.js',
        dest: 'public/js/concat.js'
      }
    },
    min: {
      dist: {
        src: 'public/js/concat.js',
        dest: 'public/js/concat.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat min');

};

तो बस संक्षेप में मुझे दो सवालों की मदद चाहिए:

1. /public/css/एक फ़ाइल में फ़ोल्डर के तहत मेरी सभी सीएसएस फ़ाइलों को कैसे संक्षिप्त और छोटा करना है , कहते हैंmain.min.css
2. क्यों grunt.js concatenated और न्यूनतम किया जावास्क्रिप्ट फाइलों को जोड़कर पर रखता है concat.jsऔर concat.min.jsनीचे /public/js/के बजाय उन्हें हर बार आदेश अधिलेखन gruntचलाया जाता है?

---

5 जुलाई 2016 को अपडेट किया गया - ग्रन्ट 0.3.x से ग्रन्ट 0.4.x या 1.x पर अपग्रेड करना

Grunt.jsमें एक नई संरचना में स्थानांतरित कर दिया गया है Grunt 0.4.x(फ़ाइल अब कहा जाता है Gruntfile.js)। कृपया मेरी ओपन सोर्स परियोजना Grunt.js कंकाल के लिए एक निर्माण प्रक्रिया स्थापित करने में मदद के लिए देखें Grunt 1.x।

से चलती Grunt 0.4.xकरने के लिए Grunt 1.x कई बड़े बदलाव को लागू नहीं करना चाहिए ।

Answer 1

concat.js को concatकार्य के स्रोत फ़ाइलों में शामिल किया जा रहा है public/js/*.js। आपके पास एक कार्य हो सकता है जो concat.js(यदि फ़ाइल मौजूद है) फिर से समाप्‍त करने से पहले, एक सरणी को स्पष्ट रूप से परिभाषित करने के लिए पास करें कि आप कौन सी फ़ाइलों को उनके आदेश को बदलना चाहते हैं, या अपनी परियोजना की संरचना को बदल सकते हैं।

यदि बाद वाला कर रहा है, तो आप अपने सभी स्रोतों को ./srcअपनी और आपके द्वारा बनाई गई फाइलों के नीचे रख सकते हैं./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

फिर अपना कॉनकट कार्य सेट करें

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

आपका न्यूनतम कार्य

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

बिल्ड-इन मिन कार्य UglifyJS का उपयोग करता है, इसलिए आपको प्रतिस्थापन की आवश्यकता है। मैंने ग्रंट-सीएसएस को बहुत अच्छा पाया । इसे स्थापित करने के बाद, इसे अपनी ग्रन्ट फ़ाइल में लोड करें

grunt.loadNpmTasks('grunt-css');

और फिर इसे सेट करें

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

ध्यान दें कि उपयोग बिल्ट-इन मिन के समान है।

अपने defaultकार्य को बदलें

grunt.registerTask('default', 'concat min cssmin');

अब, रनिंग से gruntआपको मनचाहे परिणाम मिलेंगे।

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js

Comments

आप एक प्रतिभाशाली हैं! यह मेरे लिए कभी नहीं हुआ है, अगर मैं concatउसी jsफ़ोल्डर में शामिल करता हूं जो इसे स्कूप करेगा और इसे अपग्रेड करेगा! मैंने cssmin का उपयोग शुरू कर दिया है और यह बहुत अच्छा है! एक बार फिर धन्यवाद।

— जसदीप खालसा

महान, वास्तव में महान! लेकिन फाइलों के नाम हमेशा concat.min.cssऔर होते हैं concat.min.js। यदि मैं कुछ संशोधित करता हूं, फिर से चालू करता हूं, तो लोगों को सबसे हाल का संस्करण नहीं मिलेगा क्योंकि ब्राउज़र ने पहले ही इसे कैश कर दिया था। फ़ाइल को बेतरतीब ढंग से नाम देने और उन्हें उचित <link>और <script>टैग के अनुसार लिंक करने का कोई तरीका है ?

— तेरसियो ज़ेमल

@ TárcioZemel आप पैकेज का नाम शामिल कर सकते हैं। फ़ाइल नाम पर संस्करण:concat.min-<%= pkg.version %>.js

— रुई नून्स

आप .destइस तरह का उपयोग कर सकते हैं cssmin: { css:{ src: '<%= concat.css.dest %>', dest: './css/all.min.css'}}} यह ऑपरेशन का परिणाम हैconcat -> css

— इवान ब्लैक

Answer 2

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

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

सभी के लिए आवश्यक अपेक्षाओं के साथ संघनन में रुचि रखने वाले, इस पोस्ट को देखें

इसके अलावा एक छोटा उपकरण है जो प्रक्रिया के सभी बॉयलरप्लेट को सार करता है: अल्बानिलजेएस

Comments

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

— जसदीप खालसा

धन्यवाद! आप सही हैं, आवश्यकता है एक मॉड्यूल लोडर है और यह न तो संक्षिप्त करता है और न ही छोटा करता है। लेकिन r.js (RequireJS अनुकूलक -> requirejs.org/docs/optimization.html ) होता है। अधिक विशेष रूप से, यह आपके मॉड्यूल को आश्रितों द्वारा उन्हें ऑर्डर करने के लिए सहमत करता है। मॉडर्निज़र और jQuery के लोगों ने टूल के ऑर्डरिंग एल्गोरिथ्म का लाभ उठाया और इसे विशेष रूप से एक स्मार्ट कंसीनेटर के रूप में उपयोग किया। आप उनके रिपॉज को देख सकते हैं कि वे क्या कर रहे हैं।

— अगस्तो ऑल्टमैन क्वारंटा

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

— प्रियाबागस

Answer 3

मैं उपरोक्त उत्तर से सहमत हूं। लेकिन यहां सीएसएस संपीड़न का एक और तरीका है।

YUI कंप्रेसर का उपयोग करके आप अपने CSS को सुरक्षित कर सकते हैं :

module.exports = function(grunt) {
  var exec = require('child_process').exec;
   grunt.registerTask('cssmin', function() {
    var cmd = 'java -jar -Xss2048k '
      + __dirname + '/../yuicompressor-2.4.7.jar --type css '
      + grunt.template.process('/css/style.css') + ' -o '
      + grunt.template.process('/css/style.min.css')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
}; 

Comments

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

— अंशुल

आप इस सारी जटिलता को क्यों करना चाहेंगे और अपनी निर्माण प्रक्रिया में एक jvm कहेंगे? बस बिना किसी कारण के सभी को धीमा कर देता है।

— माइकल साल्मन

Answer 4

आपको कॉनसैट पैकेज को जोड़ने की आवश्यकता नहीं है, आप इसे इस तरह से cssmin के माध्यम से कर सकते हैं:

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : '/library/css',
            src : ['*.css', '!*.min.css'],
            dest : '/library/css',
            ext : '.min.css'
      },
      combine : {
        files: {
            '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
        }
      }
    }

और js के लिए, इस तरह से uglify का उपयोग करें:

uglify: {
      my_target: {
        files: {
            '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
        }
      }
    }

Answer 5

मुझे लगता है कि यह अधिक स्वचालित हो सकता है, ग्रंट कार्य usemin आपके लिए यह सब काम करने के लिए ध्यान रखता है, केवल कुछ कॉन्फ़िगरेशन की आवश्यकता है:

https://stackoverflow.com/a/33481683/1897196