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

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 Compressor। लेकिन फिर, मुझे उन सभी पृष्ठों को अपडेट करने की आवश्यकता होगी जिन्हें इन 3 फ़ाइलों की आवश्यकता है जो नए-नए सीएसएस के संदर्भ में हैं। ऐसा त्रुटि-प्रवण लगता है (उदा। आप कई फ़ाइलों में कुछ लाइनों को हटा रहे हैं और जोड़ रहे हैं)। कोई अन्य कम जोखिम भरा दृष्टिकोण? जेएस फाइलों के लिए एक ही मुद्दा।

Answer 1

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

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

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

Answer 2

minify देखें - यह आपको एकाधिक जेएस, सीएसएस फ़ाइलों को एक यूआरएल में ढेर करके एक में जोड़ता है, उदाहरण के लिए

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

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

Answer 3

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

Check out how easy it is।

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

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

एक संक्षिप्त जानकारी के लिए this tutorial देखें।

अद्यतन: आजकल लोगों घुरघुराना से पीछे हटना und अपने पूर्ववर्ती "घूंट" और निर्माण उपकरण के रूप में NPM का उपयोग करें। इसे here पर पढ़ें।

Answer 4

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

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

आपने अपने विकास वातावरण का उल्लेख नहीं किया है। आप देख सकते हैं कि many compressing tools listed for different environments हैं। और आप अच्छे उपकरण i.e.YUI कंप्रेसर का उपयोग कर रहे हैं।

Answer 5

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

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

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

Answer 6

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

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

Answer 7

उन लोगों के लिए जो थोड़ा हल्का और लचीला चाहते हैं, मैंने इस समस्या को हल करने के लिए आज js.sh बनाया। यह जेएस फाइलों के लिए लक्षित एक सरल कमांड लाइन टूल है जिसे आसानी से सीएसएस फाइलों का ख्याल रखने के लिए संशोधित किया जा सकता है। लाभ:

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

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

Answer 8

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

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

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

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

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

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

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

मुझे आशा है कि इससे मदद मिलती है!

Answer 9

मेरी सिम्फोनी परियोजना में मैं इस

{# 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 %} 

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

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

Answer 10

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

Answer 11

कोशिश कर के निश्चित रूप से लायक आप 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 12

त्वरित टिप बनाया गया है का उपयोग कर सकते अगर आप केवल फाइलों concat चाहते हैं:

ओपन वांछित स्थान पर एक 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 

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