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

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

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

npm install grunt-contrib-sass --save-dev

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

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

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

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

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: {
			options: {
				bare: true,
				sourceMap: true,
				sourceMapDir: 'final/js/coffee.js.map'
			},
			compile: {
			    files: {
			      'final/js/coffee.js': ['development/coffee/coffee.coffee']
			    }
			}
		},

		less: {
			options: {
				compress: true,
				sourceMap: true,
				sourceMapFilename: 'final/css/less.css.map'
			},
			compile: {
				files: {
					'final/css/less.css': 'development/less/style.less'
				}
			}
		},

		sass: {
			// ...
		}
	});

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

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

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

قبل از اینکه تنظیمات درون less رو قرار بدیم، چهار فایل بنامهای compile.sass و imported.sass و compile.scss و imported.scss رو درون پوشه sass موجود در پوشه development بسازید. همونطور که میدونید scss نسخه بروزشده و بهینه شده sass هست و بیشتر افراد از اون استفاده میکنن. بهمین دلیل ما با استفاده از grunt هم روی فایلهای Sass و هم scss مثالهایی رو براتون میزنیم. هر چند که کار کردن برای هر دوی اونا به یک صورت هست. درون فایل imported.sass کدهای زیر رو قرار بدین:

li
	font:
		family: serif
		weight: bold
		size: 1.2em

درون فایل compile.sass کدهای زیر رو قرار بدین:

@import 'imported.sass'

$blue: #3bbfce
$margin: 16px

.content-navigation
	border-color: $blue
	color: darken($blue, 9%)

.border
	padding: $margin / 2
	margin: $margin / 2
	border-color: $blue

درون فایل imported.scss کدهای زیر رو قرار بدین:

li {
	font: {
		family: serif;
		weight: bold;
		size: 1.2em;
	}
}

درون فایل compile.scss کدهای زیر رو قرار بدین:

@import 'imported.scss';

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
	border-color: $blue;
	color:
		darken($blue, 9%);
}

.border {
	padding: $margin / 2;
	margin: $margin / 2;
	border-color: $blue;
}

دیدید که درون این فایلها مقداری کد sass قرار داده شده. حالا میخایم این فایلها رو به css تبدیل کنیم. خروجی رو میخایم درون پوشه css موجود در پوشه final بنام sass.css و scss.css دخیره کنیم.

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

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

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

چهار فایل بنامهای sass.css و sass.css.map و scss.css و scss.css.map ساخته میشه. من تمام فایلها رو بصورت یک پروژه در آوردم و در سایت Github قرار میدم و با هر آموزش اون رو Update میکنم. شما میتونین برای دیدن این فایلها و بقیه موارد به صفحه Github این آموزش به نام 7learn-grunt برید. در این پلاگین بصورت پیش فرض در کنار فایل خروجی SourceMap هم ساخته میشه و قرار میگیره. شما میتونین با none قرار دادن اون، کاری کنید که دیگه ساخته نشه. برای انجام کارهای گفته شده، ویژگی options رو درون dist موجود در sass بصورت زیر قرار میدیم:

حالا اگر grunt رو مجددا اجرا کنیم، دیگه sourceMap ساخته نمیشه. این ابزار یک ویژگی دیگه بنام style داره که با استفاده از اون میتونین فرمت کدهای خروجی رو مشخص کنید. این ویژگی 4 مقدار nested و compact و compressed و expanded رو میتونه دریافت کنه. مقدار پیش فرض اون nested هست و مثلا با قرار دادن compressed کدهای خروجی بصورت فشرده در میان.

برای اینکار بصورت زیر عمل میکنیم:

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

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

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

موفق باشید

یا علی

نویسنده

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

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