একাধিক সিএসএস / জেএস ফাইলগুলি একত্রিত করুন এবং মিনিফাই করুন

Question 1

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

আমার পৃষ্ঠাটি নীচের মতো বেশ কয়েকটি সিএসএস এবং জেএস ফাইলগুলি উল্লেখ করে:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/css/main.css" />
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/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 টি ফাইলের প্রয়োজনীয় সমস্ত পৃষ্ঠাগুলি আপডেট করতে হবে। এটি ত্রুটি-প্রবণ বলে মনে হচ্ছে (যেমন আপনি অনেকগুলি ফাইলে কিছু লাইন মুছে ফেলছেন এবং যুক্ত করছেন)। অন্য কোন কম ঝুঁকিপূর্ণ পদ্ধতির? জেএস ফাইলগুলির জন্য একই সমস্যা।

Question 2

পরীক্ষা করে দেখুন অল্প করা - এটা আপনার এক মধ্যে একাধিক JS, সিএসএস ফাইল একত্রিত পারবেন শুধু তাদের একটি url, যেমন মধ্যে সারিবদ্ধ দ্বারা

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

আমরা এটি বছরের পর বছর ধরে ব্যবহার করেছি এবং এটি দুর্দান্ত কাজ করে এবং ফ্লাইতে এটি করে (ফাইলগুলি সম্পাদনা করার দরকার নেই)।

Question 3

আমি মনে করি YUI কমপ্রেসারটি সবচেয়ে ভাল। এটি জেএস এবং সিএসএসকে মিনিমাইজ করে এবং এটি console.logলোকেদের নিম্ন-স্তরের জাভাস্ক্রিপ্ট ডিবাগিংয়ের জন্য যে বিবৃতিগুলি ব্যবহার করে তা সরিয়ে দেয়।

এটি কতটা সহজ তা পরীক্ষা করে দেখুন ।

আপনি এটিকে একটি পিঁপড়া টাস্কে শুরু করতে পারেন এবং তাই যদি আপনি এসএনএন / গিট ব্যবহার করেন তবে এটি আপনার পোস্ট / প্রাক কমিট হুকের মধ্যে অন্তর্ভুক্ত করতে পারেন।

আপডেট: আজকাল আমি কনক্যাট, মিনিফাই এবং অবদান অবদানগুলিতে গ্রান্ট ব্যবহার করি। আপনি এটি কোনও পর্যবেক্ষকের সাথে ব্যবহার করতে পারেন যাতে আপনি যখনই আপনার উত্স পরিবর্তন করেন তখন এটি পটভূমিতে নতুন মিনিফাইড ফাইল তৈরি করে। উগ্লিফাই কেবল কনসোল লগগুলি স্ট্রিপ করে না, অব্যবহৃত ফাংশন এবং বৈশিষ্ট্যগুলিও সরিয়ে দেয়।

একটি সংক্ষিপ্ত অন্তর্দৃষ্টি জন্য এই টিউটোরিয়াল দেখুন ।

আপডেট: আজকাল মানুষ তার পূর্বসূরি "গাল্প" থেকে উদ্বেগ প্রকাশ থেকে পিছিয়ে যায় এবং বিল্ড সরঞ্জাম হিসাবে এনপিএম ব্যবহার করে। এখানে এটি পড়ুন ।

আপডেট: সুতরাং এখন লোকেরা এনপিএম চালানোর জন্য সুতা ব্যবহার করে । আশ্চর্যের কিছু নেই; সুতা আইকন একটি বিড়াল। বেশিরভাগ বর্তমান ফ্রেমওয়ার্কগুলি প্যাকেজগুলিতে সংস্থানগুলি বান্ডিল করার জন্য ওয়েবপ্যাক ব্যবহার করে, যা পরে সংশোধনেরও যত্ন নেয় ।

Question 4

সদ্য-মিনিফড সিএসএসের উল্লেখ করতে আমার এই পৃষ্ঠাগুলির 3 টি ফাইল দরকার এমন সমস্ত পৃষ্ঠাগুলি আপডেট করতে হবে।

প্রথমত আমি বলব আপনার সাধারণ শিরোনাম হওয়া উচিত। সুতরাং যখনই প্রয়োজন হয় সব সময়ে সমস্ত শিরোনাম পরিবর্তন করার প্রয়োজন হবে না। একক শিরোনাম বা ২-৩ থাকা ভাল অনুশীলন। সুতরাং আপনার পৃষ্ঠার প্রয়োজন হিসাবে আপনি আপনার শিরোনাম পরিবর্তন করতে পারেন। সুতরাং আপনি যখনই নিজের ওয়েব-অ্যাপটি প্রসারিত করতে চান এটি কম ঝুঁকিপূর্ণ এবং ক্লান্তিকর হবে।

আপনি আপনার বিকাশের পরিবেশের কথা উল্লেখ করেন নি। আপনি দেখতে পাচ্ছেন বিভিন্ন পরিবেশের জন্য তালিকাবদ্ধ প্রচুর সংক্ষেপণ সরঞ্জাম রয়েছে । এবং আপনি ভাল সরঞ্জাম ieYUI সংক্ষেপক ব্যবহার করছেন।

Question 5

আমি আমার সিএসএস এবং জেএস ফাইলগুলি একত্রিত করতে কোডকিট ব্যবহার করে শেষ করেছি। আমি যে বৈশিষ্ট্যটি সত্যিই দরকারী মনে করি তা হ'ল ফাইল সেভের উপর সংক্ষিপ্তকরণ করার ক্ষমতা; কারণ এটি সম্পর্কিত সিএসএস / জেএস সম্পদ পর্যবেক্ষণ করে। একবার আমি সেগুলি যথাযথভাবে 1 টি সিএসএস এবং 1 জেএস ফাইলগুলিতে সংযুক্ত করার পরে অন্য সমস্ত ফাইল কেবল এই 2 টিতে উল্লেখ করতে পারে।

এমনকি কোডকিটকে অন-দ্য ফ্লাই মিনিফিকেশন / সংক্ষেপণ করতেও বলতে পারেন।

দাবি অস্বীকার: আমি কোডকিটের সাথে কোনওভাবেই অনুমোদিত নয়। আমি এলোমেলোভাবে ওয়েবে এটি পেয়েছি এবং এটি আমার বিকাশের প্রক্রিয়াতে একটি দুর্দান্ত সরঞ্জাম হিসাবে কাজ করেছে। আমি এটি এক বছরেরও বেশি আগে প্রথম ব্যবহার করার পরে এটি ভাল আপডেটের সাথে আসে।

Question 6

উইন্ডোজ ব্যবহারকারীদের জন্য দ্রুত টিপস, যদি আপনি কেবল ফাইলগুলি সংহত করতে চান:

পছন্দসই জায়গায় একটি সেন্টিমিডি খুলুন এবং " টাইপ " ব্যবহার করে কেবল আপনার ফাইলগুলিকে একটি ফাইলে পাইপ করুন

প্রাক্তন:

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

Question 7

রাস্তায় এটি 2015 বছর এবং ইমো গুল্প ব্যবহার করার সবচেয়ে সহজ উপায় - http://gulpjs.com/ । Minifying ব্যবহার কোড নি: শ্বাসে-কুতসিত করান JS স্ক্রিপ্ট এবং নি: শ্বাসে-অল্প করা-CSS CSS এর জন্য খুবই সহজ। গুল্প অবশ্যই চেষ্টা করার মতো মূল্যবান

Question 8

আমি আপনাকে কোনও কন্টেন্ট ম্যানেজমেন্ট সিস্টেম (ওয়ার্ডপ্রেস, জুমলা, দ্রুপাল, ইত্যাদি) উল্লেখ করতে দেখছি না তবে আপনি যদি কোনও জনপ্রিয় সিএমএস ব্যবহার করেন তবে তাদের সকলের জন্য প্লাগইন / মডিউল উপলব্ধ (ফ্রি বিকল্পগুলি পাশাপাশি) রয়েছে যা আপনার সিএসএস এবং জেএসকে ছোট করে এবং ক্যাশে করবে।

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

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

Question 9

এমন লোকদের জন্য যারা কিছুটা আরও হালকা ও নমনীয় কিছু চান, আমি এই সমস্যাটি সমাধানের জন্য আজই js.sh তৈরি করেছি । এটি একটি সাধারণ কমান্ড লাইন সরঞ্জাম যা জেএস ফাইলগুলির দিকে লক্ষ্য করে যাতে সিএসএস ফাইলগুলির যত্ন নিতে সহজেই সংশোধন করা যায়। উপকারিতা:

কোনও প্রকল্পে একাধিক বিকাশকারী দ্বারা ব্যবহারের জন্য সহজেই কনফিগার করা যায়
স্ক্রিপ্ট_র্ডার.txt এ উল্লিখিত ক্রমে জেএস ফাইলগুলি একত্রিত করে
গুগলের ক্লোজার কম্পাইলার দিয়ে তাদের সংকুচিত করে
জেএসকে <25 কেবি খণ্ডে বিভক্ত করুন যেখানে আইফোন 25kb এর চেয়ে বড় কিছু ক্যাশে করবে না
<script>ট্যাগ সহ একটি ছোট পিএইচপি ফাইল তৈরি করে যেখানে আপনি উপযুক্ত যেখানে অন্তর্ভুক্ত করতে পারেন
ব্যবহার: js.sh -u yourname

এটি কিছু উন্নতি করতে পারে তবে আমার ব্যবহারের ক্ষেত্রে এটি এখনও পর্যন্ত দেখা অন্যান্য সমাধানগুলির চেয়ে ভাল।

Question 10

অপ্টিমাইজেশনের প্রথম পদক্ষেপটি ফাইল মিনিমাইজেশন। (আমি কমাতে এবং অপ্টিমাইজেশনের জন্য দৃUL়ভাবে জিএলপি সুপারিশ করি Its

বা ওল্ড স্কুল সমাধান:

1) সাধারণভাবে, অপ্টিমাইজেশনের প্রক্রিয়া হিসাবে, কোনও সাইটের পারফরম্যান্সকে অনুকূল করতে, সমস্ত সিএসএসকে একটি ফাইলে মার্জ করার চেষ্টা করুন এবং কম্পাস ব্যবহার করে ফাইলকে সংকুচিত করুন । স্ট্যাটিক সিএসএসে আপনার একাধিক অনুরোধগুলি একক দিয়ে প্রতিস্থাপন করা হবে।

২) সিডিএন (বা গুগল হোস্টেড লাইব্রেরি) ব্যবহার করে আপনি সমাধান করতে পারেন একাধিক জেএসের সমস্যা তাই অনুরোধগুলি আপনার নয় অন্য সার্ভারে যান। এই ভাবে সার্ভার পরবর্তী প্রেরণের আগে পূর্ববর্তী অনুরোধটি সম্পূর্ণ হওয়ার অপেক্ষা করে না।

3) আপনার নিজের স্থানীয়ভাবে সঞ্চিত জাভাস্ক্রিপ্ট যদি বন্ধনী প্লাগইন "কম্প্রেস জাভাস্ক্রিপ্ট" ব্যবহার করে প্রতিটি ফাইল ন্যূনতম করুন । জাভাস্ক্রিপ্ট সংকোচনের জন্য এটি মূলত একটি ক্লিক। বন্ধনীগুলি সিএসএস এবং জেএস এর জন্য নিখরচায় সম্পাদনা করা হয় তবে পিএইচপি এবং অন্যান্য ভাষার জন্য ব্যবহার করা যেতে পারে। উভয় ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড বিকাশকারীদের জন্য তৈরি করার জন্য প্রচুর প্লাগইন রয়েছে। এই সমস্ত (এখনও পর্যন্ত একাধিক) আদেশগুলি করতে সাধারণভাবে "এক ক্লিক" করুন। বিটিডাব্লু, বন্ধনীগুলি আমার অত্যন্ত ব্যয়বহুল ড্রিমউইভারকে প্রতিস্থাপন করেছে;)

3) মত সরঞ্জাম ব্যবহার করার চেষ্টা করুন Sass , কম্পাস, কম আপনি সিএসএস কমানোর জন্য।

দ্রষ্টব্য: SASS মেশানো বা ভেরিয়েবলগুলি ব্যবহার না করেও আপনার সিএসএস সংকুচিত হবে (কেবল সহজ ব্যবহার খাঁটি সিএসএস এবং কম্পাস "ঘড়ি" কমান্ড এটি আপনার জন্য সংকুচিত করবে)।

আশা করি এটা কাজে লাগবে!

Question 11

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

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

Question 12

আমার সিমফনি প্রকল্পে আমি এরকম কিছু করি do

{# 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।

তবে এই সমাধানটি কেবল তখনই কাজ করে যদি একই সিএসএস ফাইলগুলি সমস্ত পৃষ্ঠায় অন্তর্ভুক্ত থাকে।

Question 13

আপনি 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);