আমি এখানে সমাধানগুলি অপছন্দ করি ( আমি আগে দিয়েছিলাম তার একটি সহ ) এবং এখানে কেন:
- সর্বাধিক ভোট দেওয়া উত্তরের সমস্যাটি হ'ল আপনি যখন কোনও জেএস ফাইল যুক্ত / পুনর্নবীকরণ / মুছবেন তখন আপনাকে স্ক্রিপ্ট ট্যাগগুলির তালিকা ম্যানুয়ালি সিঙ্ক করতে হবে।
- গৃহীত উত্তরের সমস্যাটি হ'ল আপনার জেএস ফাইলগুলির তালিকায় প্যাটার্ন মেলানো যাবে না। এর অর্থ আপনি গ্রান্টফাইলে হাত দিয়ে এটি আপডেট করবেন।
আমি এই দু'টি সমস্যার সমাধান কীভাবে করব তা বুঝতে পেরেছি। আমি আমার গুরুতর কাজটি সেট আপ করেছি যাতে প্রতিবার কোনও ফাইল যুক্ত করা বা মুছতে গেলে স্ক্রিপ্ট ট্যাগগুলি প্রতিফলিত হওয়ার জন্য স্বয়ংক্রিয়ভাবে উত্পন্ন হয়। এই ভাবে, আপনি আপনার HTML ফাইল অথবা আপনার ঘোঁৎ ঘোঁৎ ফাইল পরিবর্তন করার প্রয়োজন হবে না যখন আপনি যোগ / অপসারণ / নামান্তর আপনার জাতীয় ফাইল।
কীভাবে এটি কাজ করে তা সংক্ষেপে, আমার কাছে স্ক্রিপ্ট ট্যাগগুলির জন্য একটি ভেরিয়েবল সহ একটি এইচটিএমএল টেমপ্লেট রয়েছে। আমি এই ভেরিয়েবলটি জনিত করতে https://github.com/alanshaw/grunt-incolve-replace ব্যবহার করি । ডেভ মোডে, সেই পরিবর্তনশীলটি আমার সমস্ত জেএস ফাইলগুলির গ্লোব্বিং প্যাটার্ন থেকে আসে। যখন কোনও জেএস ফাইল যুক্ত বা সরানো হয় তখন ওয়াচ টাস্কটি এই মানটিকে পুনরায় গণনা করে।
এখন, দেব বা প্রোড মোডে বিভিন্ন ফলাফল পেতে, আপনি কেবল সেই ভেরিয়েবলটিকে একটি পৃথক মান দিয়ে বসান। এখানে কিছু কোড রয়েছে:
var jsSrcFileArray = [
'src/main/scripts/app/js/Constants.js',
'src/main/scripts/app/js/Random.js',
'src/main/scripts/app/js/Vector.js',
'src/main/scripts/app/js/scripts.js',
'src/main/scripts/app/js/StatsData.js',
'src/main/scripts/app/js/Dialog.js',
'src/main/scripts/app/**/*.js',
'!src/main/scripts/app/js/AuditingReport.js'
];
var jsScriptTags = function (srcPattern, destPath) {
if (srcPattern === undefined) {
throw new Error("srcPattern undefined");
}
if (destPath === undefined) {
throw new Error("destPath undefined");
}
return grunt.util._.reduce(
grunt.file.expandMapping(srcPattern, destPath, {
filter: 'isFile',
flatten: true,
expand: true,
cwd: '.'
}),
function (sum, file) {
return sum + '\n<script src="' + file.dest + '" type="text/javascript"></script>';
},
''
);
};
...
grunt.initConfig({
includereplace: {
dev: {
options: {
globals: {
scriptsTags: '<%= jsScriptTags(jsSrcFileArray, "../../main/scripts/app/js")%>'
}
},
src: [
'src/**/html-template.html'
],
dest: 'src/main/generated/',
flatten: true,
cwd: '.',
expand: true
},
prod: {
options: {
globals: {
scriptsTags: '<script src="app.min.js" type="text/javascript"></script>'
}
},
src: [
'src/**/html-template.html'
],
dest: 'src/main/generatedprod/',
flatten: true,
cwd: '.',
expand: true
}
...
jsScriptTags: jsScriptTags
jsSrcFileArrayএটি আপনার সাধারণ গ্রাউন্ট ফাইল-গ্লোব্বিং নিদর্শন। jsScriptTagsগ্রহণ করে jsSrcFileArrayএবং scriptউভয় পক্ষের ট্যাগগুলির সাথে একত্রিত করে। destPathপ্রতিটি ফাইলে আমি চাই উপসর্গ।
এইচটিএমএল দেখতে দেখতে এখানে কি:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
এখন, আপনি কনফিগারেশনে দেখতে পাচ্ছেন, মোডে scriptচলাকালীন আমি হার্ড কোডিং ট্যাগ হিসাবে সেই ভেরিয়েবলের মান উত্পন্ন করি prod। ডেভ মোডে, এই ভেরিয়েবলটি এর মতো একটি মানটিতে প্রসারিত হবে:
<script src="../../main/scripts/app/js/Constants.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Random.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Vector.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/StatsData.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Dialog.js" type="text/javascript"></script>
যদি আপনার কোন প্রশ্ন থাকে তাহলে আমার জানতে দিন।
PS: প্রতিটি ক্লায়েন্ট-সাইড জেএস অ্যাপ্লিকেশনটিতে আমি যা করতে চাই তার জন্য এটি কোডের এক ক্রেজি পরিমাণ। আমি আশা করি কেউ এটিকে পুনরায় ব্যবহারযোগ্য প্লাগইনে রূপান্তর করতে পারে। হয়ত আমি কিছুদিন করব।