کامپایل Sass با Gulp

در ادامه معرفی پلاگین های مفید Gulp امروز قصد دارم شیوه کامپایل Sass به CSS توسط Gulp را بررسی کنیم.

اگر قبلا از Sass استفاده کردید احتمالا از یکی از ابزارهایی که برای کامپایل آن به CSS آماده شده هست، استفاده کردید که معروفترین اون ها کامپایلر رسمی خود Sass هست که با زبان رابی نوشته شده است.

در گالپ 2 روش معروف برای کامپایل Sass وجود دارد:

روش اول: پلاگین gulp-ruby-sass

این پلاگین از کامپایلر رسمی Sass استفاده می کند، بنابراین برای استفاده از آن باید این کامپایلر قبلا بر روی سیستم شما نصب شده باشد. این پلاگین تمامی امکانات کامپایلر Sass را در اختیار شما قرار می دهد مانند تنظیماتی مثل compass و lineNumbers.

در زیر نمونه یک تسک برای کامپایل Sass را مشاهده می کنید:

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('sass', function () {
    return gulp.src('assets/scss/**/*.scss')
        .on('error', function (err) { console.log(err.message); })
        .pipe(gulp.dest('assets/css'));
});

این تسک که با دستور gulp sass در خط فرمان اجرا می شود تمامی فایل های موجود در پوشه assets/scss را که با پسوند scss قرار دارند کامپایل کرده و در پوشه assets/css ذخیره می کند. در این بین اگر خطایی هم رخ دهد در کنسول خط فرمان نمایش می دهد. برای مشاهده دیگر امکانات این پلاگین به این صفحه مراجعه کنید.

روش دوم: پلاگین gulp-sass

این پلاگین از کامپایلر node-sass استفاده می کند که اون هم از libsass برای کامپایل کردن استفاده می کند. libsass در حال حاضر سریعترین کامپایلر موجود برای Sass هست. تفاوت این دو پلاگین هم در همین هست. gulp-sass فایل ها را سریعتر کامپایل می کند (واقعا سریعتر!) اما نسبت به gulp-ruby-sass از امکانات کمتری برخوردار است.

برای انجام تسکی که در بالا تعریف کردیم توسط gulp-sass می توانید از کد زیر استفاده کنید:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('assets/scss/**/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(gulp.dest('assets/css'));
});

برای مشاهده دیگر امکانات این پلاگین و تنظیمات آن می توانید به این آدرس مراجعه کنید.

جمع بندی

سرعت gulp-sass به اندازه ای بالا هست که بتوان قید کمبودهایی که نسبت به gulp-ruby-sass دارد را زد. اما شما می توانید همزمان از جفت این کامپایلرها در پروژه خود استفاده کنید و هر از چند گاهی فایل ها را با gulp-ruby-sass کامپایل کنید تا از وجود خطاها کاملا خیالتان راحت شود ( تجربه ما نشون داده بعضی خطاها توسط gulp-sass نمایش داده نمی شود! ).

این نکته رو هم در نظر داشته باشید که برخی قابلیت های Sass که به تازگی معرفی شده است ممکن است توسط libsass پشتیبانی نشود. جهت مشاهده اطلاعات دقیق تر به این آدرس مراجعه کنید.