فرض کنید تعداد فایل های javascript و css زیادی در پروژه تان دارید. اخیرا هم مطالب زیادی در مورد bundling و minfication خوانده اید و می خواهید با اعتماد به نفس بالا، با استفاده از قابلیت های توکار ASPNET کاری کنید که بهره وری سایت تان را با این روش ها بالا ببرید.
مشکلی که در این مواقع پیش می آید این است که دیباگ این نوع از فایل های جدیدِ bundle و minify شده به شدت سخت و دشوار است و این ها هیچ شباهتی به فایل هایی که کد شان توسط شما تولید شده اند، ندارند.
اگر در محیط Production و "عملیاتی" مشکلی به شما گزارش شود، شما چطور می خواهید بفهمید که مشکل از کجاست؟ مخصوصا این مشکل زمانی محرزتر می شود که تعداد زیادی فایل js داشته باشید که همه شان را در یک فایل bundle کرده باشید و بعد هم با انجام minification، کد نهایی را به کلی دگرگون کرده اید و دیگر از کد سر در نمیاورید.
این مشکل زمانی حادتر می شود که کد های اصلی ما با TypeScript نوشته شده باشند. یا فایل های CSS مان با SASS و یا LESS تولید شده باشند. دیگر عملا هیچ ربط و نسخی بین کدهایی که توسعه کرده ایم و کدهایی که مرورگر استفاده می کند وجود ندارد و کار دیباگ بسیار دشوار خواهد شد.
راه حل این مشکل استفاده از فایل هایی به نام Sourcemap می باشد. sourcemap ها در همه مرورگرهای مدرن پشتیبانی می شوند. به کمک این فایل ها، مرورگر در عین اینکه فایل های minify و bundle شده را اجرا می کند، در هنگام دیباگ می تواند نشان دهد که هر خط از این کد ها، به کدام فایل و کدام خط از کدهایی که ما توسعه داده ایم مربوط می شوند.
متاسفانه قابلیت های سنتی توکار ASPNET امکان تولید فایل های sourcemap را ندارند و برنامه نویس های سنتی ASPNET از این قابلیت بی بهره می باشند. پس باید با سختیِ دیباگ کدهای عجیب غریب سمت کلاینت دسته و پنجه نرم کنند.
یکی از ساده ترین راه ها برای تولید فایل های sourcemap استفاده از gulp می باشد.
پس "بیایید برای پیوستن به دنیای مدرن وب از gulp استفاده کنیم!"
تشریح sourcemap با مثال:
http://www.sitepoint.com/enhance-your-javascript-debugging-with-cross-browser-source-maps/
در ادامه مطلب بالا، لازم است اضافه کنیم که فایل های sourcemap و فایل هایی که ما توسعه داده ایم به طور پیش فرض توسط مرورگر دانلود نمی شوند. مرورگر به طور پیش فرض "فقط" فایل های minify و bundle و transpile شده را دانلود می کند تا خللی در سرعت بارگذاری سایت برای کاربران پیش نیاید.
اما به محض اینکه ما از Developer Tools مرورگر استفاده کنیم، مرورگر فایل های sourcemap را دانلود می کند. یعنی این فایل ها فقط در صورت نیاز به دیباگ، دانلود می شوند.
1. توضیحاتی در مورد sourcemap ها:
http://blog.getsentry.com/2015/10/29/debuggable-javascript-with-source-maps.html
2. پلاگین sourcemap برای ابزار gulp:
https://www.npmjs.com/package/gulp-sourcemaps
"بیایید برای پیوستن به دنیای مدرن وب از gulp استفاده کنیم!"
