دوره آموزش gulpjs قسمت پنجم: کار با فایل های CSS

در این قسمت خدمات GulpJS برای CSS را به شما آموزش می‌دهیم.

کامپایل فایل‌های Sass با GulpJS

 Sass یک زبان پیش پردازنده است که در نهایت به css تبدیل می‌شود. به css‌ها نمی‌توان متغیر داد و یا شرط‌ها را به آن داد، بدین منظور از Sass استفاده می‌کنیم تا تمام این قابلیت‌ها را در حین کد نویسی داشته باشیم و در نهایت همان کدهای ساده css را در خروجی دریافت کنیم.

یک نمونه سورس sass را به شرح زیر و با نام >

$color : red;

body {
  background: $color;
}

یک پلاگین به نام gulp-sass در مسیر پروژه خود نصب می‌کنیم:

npm i -D gulp-sass

سورس gulpfile.js را به شکل زیر ویرایش می‌کنیم:

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

gulp.task('scss', function(){
	gulp
		.src('dev_css/**/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(gulp.dest('dest/'));
});

در سطر دو پلاگین gulp-sass را به سورس خود افزودیم.

در سطر 6 با دستور src کلیه فایل‌های scss موجود در پوشه dev_css را انتخاب کردیم.

در خط 7 با دستور pipe از sass استفاده کردیم. متد on موجود در این دستور باعث نمایش خطاها می‌شود.

در سطر 8 نیز آدرس خروجی را تعیین می‌کنیم.

اگر کدها را به درستی پیاده کرده باشید استایل‌های شما به سادگی کامپایل می‌شوند.

AutoPrefixer‌ها با استفاده از GulpJS

برخی قابلیت‌ها در مرورگرهای مختلف به شیوه‌های مختلف تعریف می‌شوند. مثلا برای تعریف transition در مرورگر safari باید از -webkit-transition استفاده کنید، به این پیشوند‌ها Prefixe‌های CSS گفته می‌شود.

از آن جایی که این Prefixe‌ها زیاد و گاها پیچیده هستند Gulp با پلاگین مخصوص gulp-autoprefixer این کار را به صورت خودکار برای شما انجام می‌دهد.

با دستور زیر این پلاگین را به راحتی در مسیر پروژه خود نصب کنید:

npm i -D gulp-autoprefixer

یک فایل Css مانند زیر در آدرس dev_css ایجاد کنید:

.sample{
    display: flex;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

فایل gulpfile.js را مانند زیر ویرایش کنید:

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

gulp.task('autoprefixer', function(){
	gulp
		.src('dev_css/**/*.css')
		.pipe(autoprefixer({
          browsers: ['last 2 versions']
		}))
		.pipe(gulp.dest('dest/'));
});

همانطور که در سطر هفت تا نه می‌بینید با pipe دستور autoprefixer را اضافه و درون آن کانفیگ خاصی به نام browsers را افزودیم. با مقدار last 2 versions این prefixe‌ها را بر اساس دو نسخه آخرین ورژن مرورگرها به دستورات اضافه می‌کنیم.

پس از اجرای دستور gulp autoprefixer در کامند لاین فایل استایل در پوشه dest مانند زیر ایجاد می‌شود:

.sample {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
  background: linear-gradient(to bottom, white, black); }

همانطور که می‌بینید prefix‌ها به صورت خودکار به پروژه شما افزوده شدند.