english

آموزش تبدیل SCSS به CSS با استفاده از Gulp

زبان SCSS یک نوع پیشرفته ای از CSS است با این تفاوت که میتوان متغییرها و حلقه ها را در آن به کار برد در صورتی که در CSS امکان آن نیست . همان طور که میدانید طراحی وب سایت بدون دانش CSS امکان پذیر نیست از طرفی روش های جدید نیز به بالا رفتن کیفیت کمک خواهد کرد.

روش تبدیل بسیار ساده است . کافی است ابتدا nodejs را نصب کنید این برنامه را میتوانید از سایت دانلود کنید. سپس یک پوشه جدید ساخته و بعد از وارد شدن به مسیر پوشه از طریق CMD یا وارد شدن در پوشه و کلیک راست در وسط صفحه و انتخاب Open Cmd here یا در ویندوز 10 عبارت Open powersheel windows here .

تا اینجا مقدمات کار را پیش رفتیم.

  1. در محیط CMD ابتدا دستور npm init را بزنید . سوالات را با زدن دکمه enter رد کنید
  2. با زدن دستور npm install -g gulp نرم افزار Gulp را به صورت Global نصب کنید با این دستور یکبار این نرم افزار در Cache ویندوز شما قرار میگیرد و بعد از هر بار نصب لازم به دانلود آن نیست.
  3. دستور npm install --save-dev gulp را وارد کنید . این دستور Gulp را در پوشه جاری که ساخته اید نصب میکند
  4. دستور npm install --save-dev gulp-sass پلاگین تبدیل CSS به Sass یا SCSS را نصب میکند
  5. حالا باید در Root یا همان پوشه ای که ساخته اید یک فایل با نام Gulpfile.js ایجاد کنید.
  6. ساختار برنامه شما باید به این صورت باشد
  7. - ساختار برنامه شما باید مانند شکل زیر باشد


سپس در فایل Gulpfile.js دستورات زیر را وارد کنید و در نهایت در محیط CMD دستور gulp را وارد کنید این دستور tsak پیش فرض یا همان default را اجرا میکند . دستور زیر به صورت live هرتغییر اعمال شده در فایل scss را به css تبدیل میکند.

 

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

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

//Watch task
gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['styles']);
});



منبع http://ryanchristiani.com/getting-started-with-gulp-and-sass/