دیگر باید از روش های مدرن برای بعضی کارها استفاده کرد ( Task Runners- Grunt )

همیشه توی هر پروژه ای مهم ترین کار سرعت انجام اونه، هر چی سرعت انجام پروژه بیشتر باشه قطعا سود پروژه بیشتر میشه و هم اینکه پروژه لذت بخش تر میشه. الان اینقد توسعه وب بزرگ و شاید پیچیده شده که باید  بعضی کار های تکراری رو یه کایر کرد که خود به خود انجام بشن و هر بار نیازی به انجام اونها توی پروژه ها نباشه. تا چند سال پیش همه کارهای مربوط به Cross Browser بودن، تمیز کردن کد ها، خروجی کم حجم و فشرده کردن اسکریپت های جاوا اسکریپت و فایل های css همه توسط توسعه دهنده به صورت دستی انجام می شد که آخر پروژه میتونیست توسعه دهنده رو وارد دردسر بکنه ، توسعه دهنده میخواست فایل ها رو کم حجم کنه، که ممکن بود اتفاقی اشتباهی بکنه که باعث conflict بشه و یا مشکلات از این قبیل پیش بیاد و همچنین توی زمان و سرعت هم خیلی تاثیر میذاشت ، اما الان دیگه نیازی نیست همه ی این کارها به صورت دستی انجام بشن فقط کافیه یه بار وظایفی رو تعیین بکنید تا خود به خود اجرا بشن، اصن فلسه تولید فریم ورک ها  ( چه frontend و چه backend )بر این اساس بود که کار رو سریع تر کنن، مدیریتشو بهتر کن و از کار های تکراری جلوگیری کنن، مثلا sass اومد که خیلی از مشکلات css همانند prefix ها ، کد های تکراری، مدیریت طولانی مدت کد ها بهتر بشه . حالا در اخر همه ی اینها task runner ها هستن که خیلی کار رو راحت کردن و بسیاری از کارها رو به صروت اتوماتیک انجام میدن و من میخوام امروز در حد آشنایی و کاربرد task runner grunt رو معرفی کنم و یکم هم مثال بزنم، لطفا با من همراه باشید.

در ابتدا باید بگم چه کارهایی رو میشه با grunt انجام داد :

  • قابلیت فشرده سازی و ادغام چند فایل css
  • قابلیت فشرده سازی و ادغام چند فایل js ( با اولویت انتخابی function ها برای جلوگیری از conflict )
  • قابلیت تبدیل sass و less به css
  • پاک کردن css هایی که در html از اونا استفاده نمیشه
  • فشرده سازی تصاویر
  • اضافه کردن prefix های css3 و خلاص شدن از mixin ها در preprocessor ها
  • تمیز و مرتب کردن کد های html و js و….
  • و…

همونطور که میدونید تمام مراحل بالا در گذشته توسط توسعه دهنده ها به صورت دستی انجام میشد که خیلی کار تکراری و اعصاب خورد کنی به نظر میان اما شما با استفاده از grunt به راحتی میتونید تمام این کارهای رو با کدهای ساده js به صورت اتوماتیک انجام بدید و در طول پروژه به راحتی از اون استفاده کنید. الان دیگه خیلی از توسعه دهنده های رابط کاربری از task runner ها استفاده میکنند و اگر شما از اونا برای پروژه استفاده نمی کنید مطمئن باشید که برای بعضی کارهای الکی خودتون رو اذیت میکنید 🙂

مواردی که بالا برای قابلیت های grunt آوردم تازه از کارهای عمومی grunt بود ،  grunt یک مجموعه خیلی زیاد از پلاگین هایی رو شامل میشه که برای کارهای مختلف میتونید از اون استفاده کنید مثلا پلاگین های خیلی خوبی برای اتوماتیک کردن بعضی کارها در angularJS و .. داره که میتونید از اونا به راحتی استفاده کنید.

الان دیگه grunt تقریبا از همه تکنولوژی های کد نویسی جدید با پلاگین هایی که براش نوشته شده پشتیبانی میکنه مثل:

  • کامپایل jade template
  • sass
  • less
  • stylus
  • coffeescript و …

مثال :

توی قسمت زیر من یه مثالی رو میزنم که توش از ۵ تا پلاگین grunt استفاده کردم هر کدوم وظیفه خاصی رو بر عهده میگیرن :

module.experts = function(grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package,json'),

		watch :{
			sass: {
				files: ['sass/*.scss'],
				tasks: ['sass','cssmin'],
			}
		},
		sass:{
			dist: {
				files: {
					'css/style.css' : 'sass/style.scss'
				}
			}
		},
		concat: {
			options: {
				seperator : ";",
				stripBanners:true,
				banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */',
			},
			dist: {
			      src: ['js/app.js','js/script.js'],
			      dest: 'dist/<%=pkg.name %>-<%= pkg.version %>/js'
			    }
			},
			uglify: {
				options: {
					manage: false
				},
				my_target :{
					files: [{
						'js/app.min.js' : ['js/app.js','js/script.js']
					}]
				}
			},
			cssmin: {
				my_target: {
					files: [{
						expand : true,
						cwd : 'css/',
						src: ['*.css' , '!*.min.css'],
						dest :'css/',
						ext: 'min.css'
					}]
				}
			}	
	});
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-cssmin');
}

اما هدف اصلی من از ارائه این پست آشنایی با task runner ها نبود؛ هدف اصلیم این بودش که باید از این ابزار ها استفاده کرد، به نظر خودم مهمترین کار یه توسعه دهنده بعد از تفکر خوب و سلیقه، ابزار کارشه همونطور که ide یا یه editor توی کار توسعه دهنده نقش اساسی داره ابزار های دیگه هم مثل فریم ورک ها و .. نقش اساسی رو دارن که باید از اونا استفاده کرد. با استفاده از task runners  ها میتونید کارهای رو خیلی سریعتر خروجی بگیرید و از آنها استفاده کنید.

و نکته آخر:

Grunt js اصلا چیز سختی نیست و یک زبان نیست که نیاز به یادگیری داشته باشه و کار بزرگ و عجیبی هم نیست یک ابزار برای راحتیه کار و افزایش سرعت انجام کاره  که تنها با با گذاشتم ۲ ساعت از وقتتون روی گرانت میتونین از اون توی پروژه و در زمان انجام پروژه استفاده کنید، اگر تا حالا استفاده نکردید و گرانت توسط دیگران برای شما یک کار عجیب تعریف شده، میتونید از همین الان از اون استفاده کنید و لذت ببرید 🙂 البته باید بگم ریزه کاری ها و نکاتی رو داره اگر از اون استفاده کنید میتونید به این ریزه کاری ها هم مسلط بشید که پیشنهاد میکنم این مطلب رو از دست ندید.

مرسی از وقتتون.

 

 

دیگر نوشته های مرتبط با این دسته بندی