جلسه هفتم – فشرده‌سازی فایل‌های CSS با Gulp

• ابزارها و پلاگین‌ها:
  • gulp-sass: تبدیل فایل‌های .scss به .css.
  • gulp-css (یا gulp-clean-css): فشرده‌سازی فایل‌های CSS.
  • gulp-rename: تغییر نام فایل‌ها (مثلاً اضافه کردن .min به فایل‌های فشرده).
• مراحل کار:
  1. تبدیل Sass به CSS:
     • فایل‌های .scss داخل src/assets/sass/ را با استفاده از gulp-sass به CSS تبدیل می‌کنیم.
     • خروجی CSS در پوشه‌ی src/assets/css/ قرار می‌گیرد تا آماده فشرده‌سازی باشد.

     • مثال:

        

       gulp.src("src/assets/sass/*.scss")
           .pipe(sass().on("error", sass.logError))
           .pipe(gulp.dest("src/assets/css"));
       

  2. فشرده‌سازی CSS:
     • فایل‌های CSS داخل src/assets/css/ را با gulp-css فشرده می‌کنیم.
     • با استفاده از gulp-rename نام فایل فشرده را به style.min.css تغییر می‌دهیم.

     • خروجی نهایی در dist/assets/css/ قرار می‌گیرد.
       مثال:

        

       gulp.src("src/assets/css/*.css")
           .pipe(cssMin())
           .pipe(rename("style.min.css"))
           .pipe(gulp.dest("dist/assets/css"));
       

• نکات مهم:
  • Rename: برای مشخص کردن فایل‌های فشرده، معمولاً .min به انتهای نام فایل اضافه می‌کنیم.
  • ساختار پوشه‌ها:
    • src/assets/sass/ → فایل اصلی Sass
    • src/assets/css/ → فایل CSS غیر فشرده
    • dist/assets/css/ → فایل CSS فشرده (style.min.css)
  • اجرای gulp باعث می‌شود مراحل تبدیل Sass → CSS → فشرده‌سازی CSS → انتقال به dist انجام شود.