कई सीएसएस / जेएस फ़ाइलों को मिलाएं और कम से कम करें

Question

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

मेरा पेज निम्नलिखित की तरह कई CSS और JS फाइलों को संदर्भित करता है:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

उत्पादन रिलीज के लिए, मैं 3 सीएसएस फ़ाइलों को एक में संयोजित करना चाहता हूं और उदाहरण के लिए YUI कंप्रेसर का उपयोग करके इसे छोटा करना चाहता हूं । लेकिन फिर, मुझे उन सभी पृष्ठों को अपडेट करने की आवश्यकता होगी जो इन 3 फाइलों को नए-नए सीएसएस के संदर्भ में चाहिए। यह त्रुटि-प्रवण लगता है (जैसे आप कई फ़ाइलों में कुछ पंक्तियाँ निकाल और जोड़ रहे हैं)। कोई अन्य कम जोखिम भरा दृष्टिकोण? जेएस फ़ाइलों के लिए एक ही मुद्दा।

Comments

मुझे उम्मीद है कि वे नए asp.net 4.5 सामान में कुछ इस तरह से पेश करेंगे ताकि 'डिबग' में स्क्रिप्ट व्यक्तिगत और संयुक्त रूप से प्रस्तुत की जा सकें, लेकिन 'रिलीज़' में वे संयुक्त और छोटा हो

— डैनियल पॉवेल

Answer 1

बाहर की जाँच करें minify - यह आपको एक में कई js, css फाइलों को एक url, उदा

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

हमने इसे सालों तक इस्तेमाल किया है और यह एक बेहतरीन काम करता है और इसे फ्लाई पर करता है (फाइलों को संपादित करने की कोई जरूरत नहीं है)।

Comments

हाय नूडल्स, यह मेरे लिए काम नहीं कर रहा है। यह मुझे उस स्क्रिप्ट src के लिए 404 देता है। मैंने इस्तेमाल किया - <script src = " test.com/script1.js,http://test.com/script2.js " >

— बुटीक / ...

Answer 2

मुझे लगता है कि YUI कंप्रेसर सबसे अच्छा है। यह JS और CSS को मिनिमाइज करता है और यह उन console.logस्टेटमेंट्स को भी स्ट्रिप करता है जो लोग लो-लेवल जावास्क्रिप्ट डीबगिंग के लिए इस्तेमाल करते हैं।

चेक करें कि यह कितना आसान है ।

आप इसे एक चींटी कार्य में शुरू कर सकते हैं और इसलिए यदि आप svn / git का उपयोग करते हैं तो इसे अपने पोस्ट / प्री-कमिट हुक में शामिल करें।

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

संक्षिप्त जानकारी के लिए इस ट्यूटोरियल को देखें ।

अद्यतन: आजकल लोग अपने पूर्ववर्ती "gulp" को ग्रन्ट से वापस ले जाते हैं और एक निर्माण उपकरण के रूप में npm का उपयोग करते हैं। यह के बारे में पढ़ें यहाँ ।

अद्यतन: तो अब लोग npm को चलाने के लिए यार्न का उपयोग करते हैं । कोई अचरज नहीं; यार्न आइकन एक बिल्ली है। अधिकांश मौजूदा ढांचे पैकेजों में संसाधनों को बंडल करने के लिए वेबपैक का उपयोग करते हैं, जो तब खनन का भी ध्यान रखता है ।

Comments

ऊपर दिए गए लिंक से इस समय सीएसएस फ़ाइलों को कम करने के लिए समर्थन नहीं है, भले ही यह YUI कंप्रेसर की विशेषता है।

— सांगो

वैसे YUI कंप्रेसर वेबसाइट पर यह लिखा है: "YUI कंप्रेसर इसाक क्रॉलर के नियमित-अभिव्यक्ति-आधारित सीएसएस मिनिफ़ायर के पोर्ट का उपयोग करके CSS फाइलों को संपीड़ित करने में सक्षम है।" इसके अलावा: yui.github.io/yuicompressor/css.html

— एंड्रेस्च सर्ज

वर्कफ़्लो समाधान के महान इतिहास, और अगले अद्यतन के लिए तत्पर हैं!

— gdbj

कोई भी जानकारी ? आजकल लोग क्या करते हैं?

— Xsmael

@Xsmael: मैंने एक और वर्तमान अपडेट जोड़ा

— एन्ड्रेस सर्ज

Answer 3

मुझे उन सभी पृष्ठों को अपडेट करने की आवश्यकता है जो इन 3 फ़ाइलों को नए-minified CSS के संदर्भ में चाहिए।

सबसे पहले मैं कहूंगा कि आपके पास सामान्य हेडर होना चाहिए। इसलिए जब भी आवश्यक हो सभी हेडर को हर समय बदलना आवश्यक नहीं होगा। सिंगल हेडर या 2-3 के लिए अच्छा अभ्यास है। इसलिए जैसे ही आपके पेज की जरूरत होगी आप अपना हेडर बदल सकते हैं। इसलिए जब भी आप अपने वेब-ऐप का विस्तार करना चाहते हैं तो यह कम जोखिम भरा और थकाऊ होगा।

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

Answer 4

मैंने अपने CSS और JS फ़ाइलों को संक्षिप्त करने के लिए CodeKit का उपयोग करके समाप्त किया । जो सुविधा मुझे वास्तव में उपयोगी लगती है वह है फाइल सेव पर कॉन्टेक्ट करने की क्षमता; क्योंकि यह संबंधित CSS / JS संपत्तियों की निगरानी करता है। एक बार जब मैंने उन्हें ठीक तरह से 1 सीएसएस और 1 जेएस फाइलों में मिला दिया, तो अन्य सभी फाइलें केवल इन 2 को संदर्भित कर सकती हैं।

आप कोडकिट को ऑन-द-फ्लाई मिनिफिकेशन / कम्प्रेशन करने के लिए भी कह सकते हैं।

अस्वीकरण: मैं CodeKit के साथ किसी भी तरह से संबद्ध नहीं हूं। मैंने इसे वेब पर अनियमित रूप से पाया और इसने मेरी विकास प्रक्रिया में एक महान उपकरण के रूप में काम किया है। यह अच्छे अपडेट के साथ भी आता है क्योंकि मैंने पहली बार इसे एक साल से ज्यादा पहले इस्तेमाल किया था।

Comments

यह सिर्फ मैक के लिए है ... अब तक विंडोज़?

— गौरव अग्रवाल

मैं कोडकिट का उपयोग करता हूं और इसे प्यार करता हूं ... सिवाय इसके कि एक परियोजना को एक नई शाखा को चेक करने के साथ ही मेरे जेएस के संघटन को मारता है। Npm का उपयोग शुरू करने के लिए जा रहा है।

— gdbj

Answer 5

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

वांछित स्थान पर एक cmd खोलें, और अपनी फ़ाइलों को " प्रकार " का उपयोग करके एक फ़ाइल में पाइप करें

उदाहरण के लिए:

type .\scripts\*.js >> .\combined.js

यदि आपकी स्क्रिप्ट का क्रम महत्वपूर्ण है, तो आपको वांछित क्रम में, फ़ाइलों को स्पष्ट रूप से लिखना होगा ।

मैं का उपयोग इस मेरी कोणीय / बूटस्ट्रैप परियोजनाओं के लिए एक बल्ला फ़ाइल में

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

Comments

सबसे सरल तरीका / अवधारणा मैंने पाया है कि पूरी तरह से काम करना चाहिए, भले ही मैं पूरी तरह से एक अलग भाषा का उपयोग कर रहा हूं। मेरा विचार अब इसे एक तरह की कैश फ़ाइल में बदलना है और पेज कॉल करना है। धन्यवाद।

— जैकट्रेड २०'१

Answer 6

यह गली में 2015 साल है और सबसे आसान तरीका है imo का उपयोग कर रहा है - http://gulpjs.com/ । Js स्क्रिप्ट के लिए gulp-uglify और css के लिए gulp-minify-css का उपयोग करके कोड को कम करना बहुत सरल है। गुलप निश्चित रूप से कोशिश करने लायक है

Answer 7

मैं आपको एक सामग्री प्रबंधन प्रणाली (Wordpress, Joomla, Drupal, आदि) का उल्लेख नहीं करता हूं, लेकिन यदि आप किसी भी लोकप्रिय CMS का उपयोग कर रहे हैं, तो वे सभी प्लगइन्स / मॉड्यूल उपलब्ध हैं (साथ ही मुफ्त विकल्प) जो आपके सीएसएस और जेएस को छोटा और कैश करेंगे।

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

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

Answer 8

उन लोगों के लिए जो कुछ अधिक हल्का और लचीला चाहते हैं, मैंने इस समस्या को दूर करने के लिए आज jshsh बनाया । यह एक साधारण कमांड लाइन टूल है जो जेएस फाइलों की ओर लक्षित है जिसे आसानी से सीएसएस फाइलों की देखभाल के लिए भी संशोधित किया जा सकता है। लाभ:

• आसानी से एक परियोजना पर कई डेवलपर्स द्वारा उपयोग के लिए विन्यास
• Script_order.txt में निर्दिष्ट क्रम में JS फ़ाइलों को जोड़ती है
• Google के क्लोजर कंपाइलर के साथ उनकी तुलना करता है
• JS को <25kb में विभाजित करता है जहाँ संभव हो तो iPhone 25kb से अधिक कैश नहीं करेगा
• <script>उन टैग्स के साथ एक छोटी सी PHP फ़ाइल बनाता है जिसे आप जहाँ उपयुक्त हो सम्मिलित कर सकते हैं
• उपयोग: js.sh -u yourname

यह कुछ सुधारों का उपयोग कर सकता है, लेकिन यह मेरे उपयोग के मामले के लिए मेरे द्वारा अब तक देखे गए अन्य समाधानों की तुलना में बेहतर है।

Answer 9

अनुकूलन का पहला चरण फ़ाइल न्यूनतमकरण है। (मैं दृढ़ता से अनुकूलन और अनुकूलन के लिए जीयूएलपी की सिफारिश करता हूं । इसकी सरल घड़ी समाधान, स्थापना और सभी फाइलें एक ही बार में संकुचित होती हैं। सभी सीएसएस, जेएस, कम, सैस, आदि का समर्थन करता है ...)

या पुराने स्कूल समाधान:

1) सामान्य तौर पर, साइट प्रदर्शन का अनुकूलन करने के लिए अनुकूलन की एक प्रक्रिया के रूप में, कम्पास का उपयोग करके सभी सीएसएस को एक फ़ाइल में विलय करने और फ़ाइल को संपीड़ित करने का प्रयास करें । इस तरह स्थिर सीएसएस के लिए आपके कई अनुरोधों को एकल के साथ बदल दिया जाएगा।

2) कई जेएस की समस्या आप सीडीएन (या Google होस्टेड लाइब्रेरी) का उपयोग करके हल कर सकते हैं, इसलिए अनुरोध आपके अन्य सर्वर पर नहीं जाते हैं। इस तरह से सर्वर अगले भेजने से पहले पूरा करने के लिए पिछले अनुरोध का इंतजार नहीं करता है।

3) यदि आपके पास अपना स्थानीय रूप से संग्रहीत जावास्क्रिप्ट है, तो ब्रैकेट प्लगइन "कंप्रेस जावास्क्रिप्ट" का उपयोग करके प्रत्येक फ़ाइल को कम से कम करें । यह मूल रूप से JavsScript को संपीड़ित करने के लिए एक क्लिक है। ब्रैकेट सीएसएस और जेएस के लिए बनाया गया मुफ्त संपादक है, लेकिन इसका उपयोग PHP और अन्य भाषाओं के लिए किया जा सकता है। फ्रंट-एंड और बैक-एंड डेवलपर्स, दोनों के लिए चुनने के लिए बहुत सारे प्लगइन्स हैं। सामान्य रूप से इन सभी (अब तक कई) कमांड को करने के लिए "एक क्लिक"। Btw, ब्रैकेट्स ने मेरी बहुत महंगी ड्रीमविवर को बदल दिया;)

3) Sass , Compass, कम जैसे टूल का उपयोग करने का प्रयास करें CSS को कम से करने के लिए ।

नोट: SASS मिश्रण या चर का उपयोग किए बिना भी आपका CSS संपीड़ित होगा (बस सरल सीएसएस का उपयोग करें और कम्पास "वॉच" कमांड इसे आपके लिए संपीड़ित करेगा)।

आशा है कि ये आपकी मदद करेगा!

Answer 10

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

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

Answer 11

अपने सिम्फनी प्रोजेक्ट में मैं ऐसा कुछ करता हूं

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

जब देव संस्करण उत्पादन के लिए तैयार हो जाता है, तो मैं इस स्क्रिप्ट का उपयोग सभी सीएसएस फ़ाइलों को संयोजित करने और सामग्री को बदलने के लिए करता हूं min.css।

लेकिन यह समाधान केवल तभी काम करता है जब सभी पृष्ठों में समान सीएसएस फाइलें शामिल हों।

Answer 12

आप cssmin नोड मॉड्यूल का उपयोग कर सकते हैं जो प्रसिद्ध YUI कंप्रेसर से बनाया गया है

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);

Answer 13

सभी त्वरित उपयोगिताओं यहाँ पाए जाते हैं

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json

Comments

ऐसा लगता है कि यह साइट अब उपलब्ध नहीं है

— magikMaker