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

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

در جلسات قبلی در مورد پلاگینهای concat و uglify صحبت کردیم. در این جلسه قصد داریم در مورد پلاگین grunt-contrib-cssmin صحبت کنیم و با استفاده از اون کدهای css خودمون رو فشرده و minify کنیم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

npm install grunt-contrib-cssmin --save-dev

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

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

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

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

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: {
			// ...
		}
	});

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

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

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

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

@import url(css1.css);
@import url(css2.css);
body {
    background-color: #f00;
}

دیدید که درون این فایل با استفاده از دستور import، فایلهای قدیمی css1.css و css2.css رو هم لود کردیم. حالا میخایم فایل import.css رو فشرده کنیم و اون رو بنام import.min.css در بیاریم.

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

میبینید که درون cssmin یک وظیفه بنام all ساختیم و کارش اینه که فایل import.css رو فشرده کنه. حالا برای اینکه اون رو بصورت پیش فرض با زدن grunt اجرا کنیم، cssmin رو به آرایه آخر اضافه میکنیم:

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

اگر فایل import.min.css باز کنیم بصورت زیر هست:

body{text-align:left;background-color:red}div{font-family:Roboto}*{text-align:right}h2{font-family:Arial}

میبینید که مواردی که import شدن هم در خروجی قرار گرفتن و کامنتها حذف شده و بصورت کامل فشرده شده هست. خوبی این ابزار اینه که خیلی پیشرفته و هوشمنده و کدهاتون رو به بهینه‌ترین شکل ممکن در میاره. همونطور که فایلهای ورودی رو دیدین دو تا ویژگی برای body تعریف شده بود، این ابزار اومده و اونا رو یکی کرده. همچنین رنگ قرمز رو از #f00 به red تبدیل کرده تا جای کمتری بگیره. اگه به هر دلیلی خواستید این ویژگی هوشمند بودن رو از این ابزار بگیرید، باید ویژگی advanced رو برابر با false قرار بدین. همچنین برای ساختن sourceMap همانند پلاگین uglify عمل میکنیم. برای انجام کارهای گفته شده، ویژگی options رو درون cssmin بصورت زیر قرار میدیم:

حالا اگر grunt رو مجددا اجرا کنیم، علاوه بر فایل فشرده شده یک فایل map هم در اختیارمون قرار میگیره و کاربرد اون رو هم قبلا توضیح دادم. فایل import.min.css دارای کدهای زیر هست:

body{text-align:left}div{font-family:Roboto}*{text-align:right}h2{font-family:Arial}body{background-color:red}
/*# sourceMappingURL=import.min.js.map */

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

{"version":3,"sources":["development/css/css1.css","development/css/css2.css","development/css/import.css"],"names":[],"mappings":"AAAA,KACE,WAAY,KAWd,IACE,YAAa,OCbf,EACE,WAAY,MASd,GACE,YAAa,MCTf,KACI,iBAAkB"}

این پلاگین از ابزار clean-css استفاده کرده. بنابراین میتونین از تمام ویژگی هایی که در اون ابزار قرار داره اینجا هم استفاده کنید.

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

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

موفق باشید

یا علی

نویسنده

محمد اسفندیاری

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