تخفیف ویژه

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 19) - تبدیل کدهای Coffee به Javascript

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۲۳ مرداد ۱۳۹۵

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

grund

در جلسات قبلی در مورد پلاگینهای مختلفی صحبت کردیم. در این جلسه قصد داریم در مورد پلاگین grunt-contrib-coffee صحبت کنیم و با استفاده از اون کدهای coffee خودمون رو به کدهای Javascript تبدیل کنیم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

npm install grunt-contrib-coffee --save-dev

بعد از اینکار اینتر میزنیم:grunt install coffee

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt install coffee 2

حالا باید این بسته رو درون gruntfile.js لود کنیم:grunt install coffee 3

حالا باید یک وظیفه بنام coffee بسازیم:

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

		concat: {
			options: {
				separator: '\n\n/*--------Next File-------*/\n\n',
				banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */\n\n',
				footer: '\n\n/*------<%= pkg.author %>---------*/'
			},
			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'
			}
		},

		uglify: {
			options: {
				mangle: false
			},
			js1: {
				files: {
					'final/js/js1.min.js': ['development/js/js1.js']
				}
			},
			js2: {
				files: {
					'final/js/js2.min.js': ['development/js/js2.js']
				}
			},
			all: {
				options: {
					sourceMap: true,
        			sourceMapName: 'final/js/all.min.js.map'
				},
				files: {
					'final/js/all.min.js': ['development/js/*.js']
				}
			}
		},

		cssmin: {
			options: {
				advanced: false,
				sourceMap: true,
        		sourceMapName: 'final/css/import.min.css.map'
			},
			all: {
				files: {
					'final/css/import.min.js': ['development/css/import.css']
				}
			}
		},

		coffee: {
			// ...
		}
	});

	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.loadNpmTasks('grunt-contrib-coffee');

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

دیدید که بعد از سه task که قبلا ساخته بودیم، وظیفه coffee رو هم ساختیم.

قبل از اینکه تنظیمات درون coffee رو قرار بدیم، یک فایل بنام coffee.coffee درون پوشه coffee موجود در پوشه development بسازید و کدهای زیر رو درونش قرار بدین:

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

دیدید که درون این فایل مقداری کد coffeeScript قرار داده شده. حالا میخایم این فایل رو به Javascript تبدیل کنیم. خروجی رو میخایم درون js موجود در پوشه final بنام coffee.js دخیره کنیم.

حالا میتونیم تنظیمات مورد نظرمون رو درون اون قرار بدیم، برای اینکار بصورت زیر عمل میکنیم:grunt coffee config

میبینید که درون coffee یک وظیفه بنام compile ساختیم و کارش اینه که فایل coffee.coffee رو تبدیل به coffee.js کنه. حالا برای اینکه اون رو بصورت پیش فرض با زدن grunt اجرا کنیم، coffee رو به آرایه آخر اضافه میکنیم:grunt coffee config 2

حالا اگر grunt رو اجرا کنیم، همه کارهایی که مشخص کردیم تو یه چشم به هم زدن انجام میشن و فایلهای مورد نظر ساخته میشن.grunt coffee config 3

یک فایل بنام coffee.js ساخته میشه و اگر اون رو باز کنیم، بصورت زیر خواهد بود:

(function() {
  var cubes, list, math, num, number, opposite, race, square,
    slice = [].slice;

  number = 42;

  opposite = true;

  if (opposite) {
    number = -42;
  }

  square = function(x) {
    return x * x;
  };

  list = [1, 2, 3, 4, 5];

  math = {
    root: Math.sqrt,
    square: square,
    cube: function(x) {
      return x * square(x);
    }
  };

  race = function() {
    var runners, winner;
    winner = arguments[0], runners = 2 <= arguments.length ? slice.call(arguments, 1) : [];
    return print(winner, runners);
  };

  if (typeof elvis !== "undefined" && elvis !== null) {
    alert("I knew it!");
  }

  cubes = (function() {
    var i, len, results;
    results = [];
    for (i = 0, len = list.length; i < len; i++) {
      num = list[i];
      results.push(math.cube(num));
    }
    return results;
  })();

}).call(this);

میبینید که کدهای coffee به javascript تبدیل شدن و کامنتها هم حذف شدن. همچنین شما میتونین چندین فایل coffee رو همزمان تبدیل کرده و اونا رو به هم بچسبونید. همانند گذشته میتونین از separator و sourceMap استفاده کنید. فرض کنید بخایم یک sourceMap برای این فایل درست کنیم. برای انجام کارهای گفته شده، ویژگی options رو درون coffee بصورت زیر قرار میدیم:grunt coffee config 4

حالا اگر grunt رو مجددا اجرا کنیم، علاوه بر تبدیل کردن به javascript یک فایل map هم در اختیارمون قرار میگیره و کاربرد اون رو هم قبلا توضیح دادم. فایل coffee.js دارای کدهای زیر هست:

(function() {
  var cubes, list, math, num, number, opposite, race, square,
    slice = [].slice;

  number = 42;

  opposite = true;

  if (opposite) {
    number = -42;
  }

  square = function(x) {
    return x * x;
  };

  list = [1, 2, 3, 4, 5];

  math = {
    root: Math.sqrt,
    square: square,
    cube: function(x) {
      return x * square(x);
    }
  };

  race = function() {
    var runners, winner;
    winner = arguments[0], runners = 2 <= arguments.length ? slice.call(arguments, 1) : [];
    return print(winner, runners);
  };

  if (typeof elvis !== "undefined" && elvis !== null) {
    alert("I knew it!");
  }

  cubes = (function() {
    var i, len, results;
    results = [];
    for (i = 0, len = list.length; i < len; i++) {
      num = list[i];
      results.push(math.cube(num));
    }
    return results;
  })();

}).call(this);

//# sourceMappingURL=coffee.js.map/coffee.js.map

در خط آخر به sourceMap اون اشاره کرده. محتوای sourceMap هم بصورت زیر هست:

{
  "version": 3,
  "file": "coffee.js",
  "sourceRoot": "../../../development/coffee/",
  "sources": [
    "coffee.coffee"
  ],
  "names": [],
  "mappings": "AACA;AAAA,MAAA,sDAAA;IAAA;;EAAA,MAAA,GAAW;;EACX,QAAA,GAAW;;EAGX,IAAgB,QAAhB;IAAA,MAAA,GAAS,CAAC,GAAV;;;EAGA,MAAA,GAAS,SAAC,CAAD;WAAO,CAAA,GAAI;EAAX;;EAGT,IAAA,GAAO,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb;;EAGP,IAAA,GACE;IAAA,IAAA,EAAQ,IAAI,CAAC,IAAb;IACA,MAAA,EAAQ,MADR;IAEA,IAAA,EAAQ,SAAC,CAAD;aAAO,CAAA,GAAI,MAAA,CAAO,CAAP;IAAX,CAFR;;;EAKF,IAAA,GAAO,SAAA;AACL,QAAA;IADM,uBAAQ;WACd,KAAA,CAAM,MAAN,EAAc,OAAd;EADK;;EAIP,IAAsB,8CAAtB;IAAA,KAAA,CAAM,YAAN,EAAA;;;EAGA,KAAA;;AAAS;SAAA,sCAAA;;mBAAA,IAAI,CAAC,IAAL,CAAU,GAAV;AAAA;;;AA1BT"
}

این ابزار یک ویژگی دیگه بنام bare داره که با true قرار دادن اون کدهای خروجی دیگه در یک function کلی قرار داده نمیشن. اگر کدهای خروجی در حالت قبل رو دیده باشید همه کدها درون یک function کلی قرار داده شدن. حالا شما میتونین با استفاده از این ویژگی این امکان رو غیرفعال کنید. برای اینکار بصورت زیر عمل میکنیم:grunt coffee config 5اگر grunt رو اجرا کنیم و خروجی رو ببینیم بصورت زیر خواهد بود:

var cubes, list, math, num, number, opposite, race, square,
  slice = [].slice;

number = 42;

opposite = true;

if (opposite) {
  number = -42;
}

square = function(x) {
  return x * x;
};

list = [1, 2, 3, 4, 5];

math = {
  root: Math.sqrt,
  square: square,
  cube: function(x) {
    return x * square(x);
  }
};

race = function() {
  var runners, winner;
  winner = arguments[0], runners = 2 <= arguments.length ? slice.call(arguments, 1) : [];
  return print(winner, runners);
};

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

cubes = (function() {
  var i, len, results;
  results = [];
  for (i = 0, len = list.length; i < len; i++) {
    num = list[i];
    results.push(math.cube(num));
  }
  return results;
})();

//# sourceMappingURL=coffee.js.map/coffee.js.map

میبینید که دیگه درون یک function کلی قرار داده نشده. برای مطالعه بیشتر در مورد این ابزار میتونین به این لینک مراجعه کنید.

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

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

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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