32
تشکر

آشنایی مقدماتی با Grunt

Grunt

Grunt

اگر به دنبال راهی هستید که تمام بخش‌های سمت کلاینتی که توسعه داده‌اید با یک کلیک یا دستور آماده انتشار شوند، Grunt راه حل شما است. بوسیله Grunt و پلاگین هایش شما به راحتی میتوانید فایل‌های خود را minify، عکس‌ها را بهینه و خطا های موجود در کدها را شناسایی کنید. همچنین براحتی می‌توانید کدهای نوشته شده توسط CSS Preprocessorها مانند LESS, Sass و غیره را به کد CSS تبدیل کنید.

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

در ادامه مطلب همراه ما باشید…

نحوه کار با Grunt

اگر خیلی دنبال این هستید که شروعی هرچند ساده در کار با Node.js داشته باشید، پس حتماً این مطلب برای شما خیلی خوب است.

Grunt بر روی Node.js اجرا می‌شود. پس ابتدا باید Node.js را روی سیستمتان نصب کرده باشید. اگر این کار را نکرده‌اید توسط این صفحه نسخه مخصوص سیستم عامل خودتان را دانلود و نصب کنید.

با نصب Node.js دستور npm هم نصب میشود. این دستور مدیریت کننده پکیج های منتشر شده برای Node.js است. توسط این دستور میتوان پکیج های Node.js مانند همین Grunt را نصب یا حذف کرد.

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

Grunt به صورت پروژه ای کار می‌کند. برای مثال شما برای یک پروژه از LESS استفاده می‌کنید و می‌خواهید پلاگین مخصوص آن در Grunt را نصب کنید تا دستورات LESS شما را به CSS تبدیل کند. برای اینکار وارد پوشه پروژه خود می‌شوید و پلاگین LESS را برای آن پروژه نصب می‌کنید. اگر بخواهید برای پروژه دیگری نیز از LESS استفاده کنید، دوباره باید آن را برای آن پروژه نصب کنید، یا میتوانید فایل‌های نصب شده برای پروژه اولی را درون پروژه دومی کپی کنید.

نصب Grunt

ترمینال را باز کرده و توسط دستور زیر Grunt را نصب کنید. فلگ g- باعث می‌شود که Grunt به صورت Global نصب شود و دستورات آن در تمام مکان ها قابل استفاده باشد.

npm install -g grunt-cli

grunt-cli در‌ واقع محیط کار با Grunt در Terminal است، و خود Grunt باید برای هر پروژه به صورت جداگانه نصب شود.

در مرحله بعد ابتدا درون پوشه پروژه خودمان یک فایل به نام package.json ایجاد می‌کنیم. همانطور که در کد زیر می‌بینید بخشی به نام devDependencies وجود دارد که توسط Node.js پردازش می‌شود. این بخش لیست پکیج هایی است که برای پروژه مان احتیاج داریم و Node.js آن‌ها را برای همان پروژه نصب می‌کند.

قسمت‌های دیگر، اطلاعات دیگری در مورد پروژه است.

{
  "author": "your name",
  "name": "project name",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

در کد بالا ما به Node.js گفتیم که به پکیج Grunt با نسخه 0.4.1 یا بالاتر احتیاج داریم.

خوب پس از درست کردن فایل package.json درون محیط ترمینال، دستور زیر را می نویسیم تا Node.js پیکیج هایی را که لیست کرده‌ایم برای این پروژه نصب کند.

نکته مهم: مسیر شما در ترمینال باید مسیر پروژه باشد.

npm install

نصب پلاگین

Grunt به خودی خود کاری انجام نمی‌دهد و باید پلاگین هایی را که می‌خواهید، نصب کنید. برای مثال ما می‌خواهیم پلاگینی را نصب کنیم که کدهای LESS ما را به CSS تبدیل کند. (آشنایی با LESS)

اسم پلاگینی که اینکار را برای ما انجام می‌دهد assemble-less می‌باشد.

خوب توسط دستور زیر این پلاگین را برای پروژه نصب می‌کنیم.

npm install assemble-less --save-dev

فلگ save-dev باعث می‌شود که این پلاگین به صورت خودکار درون فایل package.json اضافه شود.

پیکربندی پلاگین

الان شما هم Grunt و هم پلاگینی که آن را لازم داشتید نصب کردید، حتی می‌توانید فایل‌های آن را درون پوشه پروژه خودتان ببینید.

برای مثال من کدهای LESS پروژه را نوشته‌ام و حالا میخواهم آن را به CSS تبدیل کنم. برای اینکار یک فایل به نام Gruntfile.js وجود دارد که شما باید پلاگین assemble-less را در آن پیکربندی کنید. ساختار این فایل به صورت زیر است:

module.exports = function(grunt) {
  // Plugin Configuration goes here
  grunt.initConfig({

  });

  // Load plugins here
  grunt.loadNpmTasks('plugin-name');
  
  //Define your defualt tasks
  grunt.registerTask('default', ['config-name']);
};

متد initConfig پیکربندی پلاگین را انجام می‌دهید (نحوه پیکربندی هر پلاگین در صفحه اینترنتی آن آمده است). متد loadNpmTasks برای لود کردن پلاگین هایی است که شما می‌خواهید از آن‌ها استفاده کنید. و متد registerTask برای معرفی کردن پلاگین پیشفرض است.

خب حالا ما بر اساس توضیحات اسناد پلاگین، فایل Gruntfile.js را به صورت زیر مینویسیم.

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      production: {
        options: {
          compress: true
        },
        files: {
          "style/main.css": "style/main.less"
        }
      }
    }
  });
  grunt.loadNpmTasks('assemble-less');
  grunt.registerTask('default', ['less']);
};

به این صورت اگر پلاگین دیگری هم داشته باشید، می‌توانید آن را اضافه کنید.

خب حالا توسط دستور زیر پلاگین assemble-less اجرا میشود.

grunt less

بیشتر میخواهید!

مطمئناً Grunt به اینجا ختم نمی‌شود. برای مثال شما می‌توانید پلاگین هایی مانند minify کردن کدهای HTML, JS, CSS، بهینه کردن تصاویر و هر پلاگینی که می‌خواهید را برای یک پروژه نمونه نصب کنید، سپس با انتفال دادن فایل‌های آن براحتی می‌توانید از آن‌ها در پروژه های دیگر بدون احتیاج به نصب استفاده کنید.

در این صفحه می‌توانید تمام پلاگین های موجود برای Grunt را مشاهده کنید.

هنوز چیزهای خیلی زیاد در مورد Grunt وجود دارد که شما خودتان باید آن‌ها را پیدا کنید. موفق باشید…


نظرات این مطلب بسته است.