تست موازی سایت روی چند دستگاه: هنگام ساخت یک وبسایت واکنشگرا، باید آن را در چند اندازه صفحه نمایش تست کنیم تا مطمئن شویم که طرح سایت به درستی بر روی اندازه‌های مختلف صفحه دستگاه‌ها، نمایش داده میشود. ما میتوانیم از شبیه ساز اندازه صفحه نمایش دستگاه در Chrome استفاده کنیم که بسیار مفید است. با این حال، هیچ چیز تست وبسایت را به اندازه دستگاه، واقعی انجام نمیدهد.

تست کردن وبسایت روی چند دستگاه هم (بصورت غیرموازی)، میتواند مشکل ساز باشد. تصور کنید ما سه دستگاه برای تست کردن وبسایتمان داریم. در این صورت باید بعد از هر تغییر کوچک یا بزرگ، مرورگرها را روی هر کدام از این دستگاه‌ها رفرش کنیم که همین مسئله به اندازه کافی سخت و مایه زحمت است.

ایده تست وبسایت موازی شده برای رسیدگی به این مشکل بوجود آمد و جریان کار را ساده‌تر کرد. یک پلاگین Grunt به نام BrowserSync وجود دارد که این کار را انجام میدهد و ما در این مقاله به شما نشان خواهیم داد که چگونه آن را در پروژه خود بکار بگیرید. با ما در ادامه همراه باشید.

تست موازی سایت روی چند دستگاه

نصب BrowserSync

برای شروع کار، ابتدا Grunt را نصب خواهیم کرد. باید مطمئن شویم که grunt-cli هم در کنار Grunt BrowserSync نصب شده است. این پلاگین تعدادی از تعاملاتی که در وبسایت اتفاق میافتد را موازی میکند. برای مثال: اسکرول کردن صفجه، پر کردن فیلدهای فرم‌ها و کلیک کردن روی لینکها و …

تمامی این اتفاقات در سایر مرورگر و دستگاه‌ها هم بصورت موازی انجام خواهد شد. دستور زیر را در خط فرمان یا ترمینال سیستم خود وارد کنید تا BrowserSync را روی دایرکتوری پروژه خود نصب کنید. (دقت کنید که در مسیر پروژه خود باشید):

npm install grunt --save-dev
npm install grunt-browser-sync --save-dev

البته باید توجه داشته باشید که Node.js و پکیج منیجر آن یعنی npm روی سیستم‌تان نصب باشد. (برای دسترسی به جامع‌ترین دوره آموزش Node.js کشور کلیک کنید)

تنظیمات و پیکربندی

پس از آنکه BrowserSync نصب شد، باید آنرا با استفاده از فایل Gruntfile.js لود کنید. (این فایل پس از نصب BrowserSync به پروژه‌تان اضافه خواهد شد):

module.exports = function (grunt) {
    grunt.initConfig({
        browserSync: {
            bsFiles: {
                src : [ 'index.html', './css/*.css' ]
            },
            ghostMode: {
                clicks: true,
                forms: true,
                scroll: true
            },
            options: {
                server: {
                    baseDir: "./"
                }
            }
        }
    });
 
    // load npm tasks
    grunt.loadNpmTasks( 'grunt-browser-sync' );
 
    // define default task
    grunt.registerTask( 'default', ['browserSync'] );
}

این پیکربندی فایلهای style.css و index.html را نمایش خواهد داد و علاوه بر آن در صورت تشخیص کوچک‌ترین تغییر در این فایلها، مرورگر را بصورت خودکار رقرش خواهد کرد. همچنین در کد بالا حالت ghostmode را فعال کردیم تا تعاملاتی همچون اسکرولینگ و کلیک کردن‌ها را در صفحه وب، موازی کنیم.

به این ترتیب نصب BrowserSync به پایان میرسد. حالا دستور grunt را در خط فرمان برای اولین اجرای BrowserSync وارد کنید:

grunt

بر خلاف نسخه‌های قدیمی‌تر، BrowserSync جدید اکنون همه چیز را برای استفاده، از جمله سرور استاتیک تنظیم میکند و URL های آن را برای بارگیری و رقرش سایتمان فراهم میکند.

و اکنون همانطور که در گیف زیر مشاهده میکنید، تمامی تغییرات ایجاد شده در فایلها، بصورت موازی و realtime در مرورگر بدون نیاز به رفرش صفحه، نمایش داده میشود:

در این مقاله، به بررسی و یادگیری نحوه تست موازی سایت روی چند دستگاه پرداختبم. از اینکه با ما همراه بودید متشکرم.