آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 14) - اتصال فایلها به یکدیگر

آخرین مطالب

امکانات وب

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 14) - اتصال فایلها به یکدیگر - قسمت 2

0 30 ۱۶ مرداد ۹۵

16در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در جلسه قبل توضیحاتی در مورد پلاگین grunt-contrib-concat دادیم و گفتیم که چطور فایل gruntfile.js رو تغییر بدین. تا اینجای کار فایل gruntfile.js بصورت زیر هست: grunt install concat plugin 5

حالا اگه بخوایم از Grunt استفاده کنیم و تنظیماتی که در بالا مشخص کردیم، انجام بشن باید بصورت زیر عمل کنیم. در ابتدا باید cmd رو باز کنید و با استفاده از دستور cd به ریشه پروژه خودتون برید. بعد از اون میتونین یک سری دستور رو بزنید:

grunt concat:css : اگر این دستور رو تایپ کرده و اینتر بزنیم، فقط بخش css که در وظیفه concat هست اجرا میشه و دو فایل css با هم ترکیب میشن و فایل final.css در پوشه final ساخته میشه
grunt concat:js : اگر این دستور رو تایپ کرده و اینتر بزنیم، فقط بخش js که در وظیفه concat هست اجرا میشه و دو فایل js با هم ترکیب میشن و فایل final.js در پوشه final ساخته میشه
grunt concat : اگر این دستور رو زده و اینتر بزنیم، هر دو کار js و css همزمان انجام میشن و دو فایل final.css و final.js ساخته میشه و در مسیرهای مشخص شده قرار میگیرن

اگر قبل از اینکه دستورات بالا رو اجرا کنید، درون پوشه final و پوشه های css و js نگاه کنید، هیچ فایلی وجود ندارد. هر کدام از این دستورات رو که اجرا میکنیم، grunt یک سری اطلاعات بهمون میده و اگر کاری که میکنه موفقیت آمیز باشه یک کلمه Done رو برمیگردونه و مشخص میکنه که کار مورد نظر انجام شده. حالا برای شروع ما دستور اول رو مینویسیم و اینتر میزنیم: grunt concat css

همونطور که در بالا میبینید، دستور مورد نظر انجام شده و در آخر Done رو به ما نشون داده. حالا اگر به پوشه css واقع در پوشه final بریم، میبینیم که یک فایل جدید بنام final.css موجود هست. اگر محتویات اون رو ببینیم بصورت زیر هست:

body {

text-align: left;

}

/* CSS is cool */

div {

font-family: Roboto;

}

* {

text-align: right;

}

/**

Headers

h2 {

font-family: Arial;

}

میبینید که کار مورد نظر انجام شده و دو فایل css با هم یکی شدن. حالا اگر همینکارو برای js انجام بدیم هم به همین صورت خواهد بود. اگر دستور سوم رو قرار بدیم، بصورت زیر میشه: grunt concat

میبینید که js و css رو مشخص نکردیم و کلا گفتیم که وظیفه concat رو انجام بده. گرانت هم میره و هر چی کار درون concat هست رو پیدا میکنه و همشون رو همزمان انجام میده. حالا اگر پوشه final نگاه کنید، فایلهای مورد نظرمون ساخته شدن. دیدید که گرانت چقدر میتونه کار مارو راحت کنه. فعلا اول راه هستیم و هنوز با قدرت کامل گرانت آشنا نشدیم. حالا شاید پیش خودمون بگیم که نمیشه درون cmd فقط بنویسیم grunt و خودش بره موارد مورد نظر رو انجام بده؟

بله میشه و بخوبی میشه این کار رو انجام داد. اگه همین الان کلمه grunt رو فقط در cmd بزنیم یک ارور به ما میده و بهمون میگه هنوز وظیفه پیش فرض رو برام مشخص نکردی، بصورت زیر: grant error default

برای اینکار باید دستور زیر رو به فایل gruntfile.js اضافه کنیم:

module.exports = function (grunt) {

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

concat: {

css: {

src: ['development/css/css1.css', 'development/css/css2.css'],

dest: 'final/css/final.css'

js: {

src: ['development/js/js1.js', 'development/js/js2.js'],

dest: 'final/js/final.js'

}

});

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.registerTask('default', ['concat']);

};

اگر از فایل gruntfile.js عکس بگیریم بصورت زیر خواهد بود: grunt register task

همونطور که دیدید با استفاده از متد registerTask میشه یک وظیفه رو ثبت کرد و به گرانت معرفی کرد. اگر در cmd دستور grunt به تنهایی قرار بگیره و اینتر زده بشه، وظیفه default صدا زده میشه. با استفاده از دستور registerTask میتونیم کاری کنیم که زمانی که یک وظیفه صدا زده میشه، چه وظیفه هایی همزمان اجرا بشن. بهمین دلیل یک آرایه قرار دادیم و درون اون concat گذاشتیم و گفتیم وقتی grunt خالی رو وارد کرد، برو و وظیفه concat رو برام اجرا کن. در این آرایه شما میتونین هر تعداد وظیفه که بخواید قرار بدین و در جلسات بعدی مثالشو براتون میزنم. بعد از اینکار اگر cmd رو باز کنیم و عبارت grunt رو زده و اینتر بزنیم، خروجی بصورت زیر خواهد شد: grant default

دیدید که به همین سادگی تونستیم با استفاده از تایپ کردن یک کلمه grunt در cmd، فایلهای css و js رو یکی کنیم و در محل مورد نظر بریزیم. حالا شما میتونین فایلهای css رو هر جور خواستید تغییر بدین و باز دوباره در cmd اینکارو انجام بدین، تا بسرعت خروجی به شما داده بشه و فایلهارو یکی کنه. در جلسه بعدی مسائل پیشرفته تر مربوط به این پلاگین رو خدمتتون عرض میکنم.

در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 14) - اتصال فایلها به یکدیگر - قسمت 2

آخرین مطالب

امکانات وب

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 14) - اتصال فایلها به یکدیگر - قسمت 2

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه