كيفية إعداد Gulp-sass باستخدام سطر الأوامر إذا كنت مبتدئًا

أنا متدرب في شركة تقنية حاليًا ، وقبل أيام قليلة تلقيت تحديًا من رئيسي حول كتابة مقال. لذلك قررت أن أكتب شيئًا عن Gulp-sass.

قد يكون إعداده أمرًا محبطًا في بعض الأحيان ، خاصة عندما تكون جديدًا عليه. أنا أستخدم Windows ، والبحث عن مقال من شأنه أن يحل مشكلتي كان مثل جعل Jack in Black-ish يتهجى كلمة "تقليل".

حسنًا ، أعتقد أنني انجرفت قليلاً هناك ... يكفي عني ، فلنبدأ!

ملاحظة: هذه هي أول مقالة منشورة لي وآمل أن تنال إعجابك. :)

تركيب العقدة

أولاً ، افتح سطر الأوامر وقم بتثبيت node.js على جهاز الكمبيوتر الخاص بك. يأتي مع Node Package Manager (npm) والذي يمكنك استخدامه لتثبيت Gulp. بعد التثبيت ، يمكنك تثبيت Gulp عن طريق التشغيل npm install gulp -g. و -gيرشد الآلية الوقائية الوطنية لتثبيت الجرعة عالميا على جهاز الكمبيوتر الخاص بك (يعني أنه يمكنك استخدام الأوامر بلع أي مكان على جهاز الكمبيوتر الخاص بك.)

قبل المتابعة ، أفترض أنك على دراية بسطر الأوامر!

انتقل إلى دليل المشروع الخاص بك وقم بالتشغيل npm init. سيؤدي هذا إلى إنشاء ملف package.json ، اضغط على Enter وسيضيف ما تريد إليه

ملف package.json.

نعم ، قد تتساءل ما هو ملف package.json الصحيح؟

يحتوي ملف package.json على بيانات وصفية متنوعة ذات صلة بمشروعك. يقدم هذا الملف معلومات إلىnpmويسمح لها بتحديد المشروع وكذلك التعامل مع تبعيات المشروع. كما أنه يجعل من السهل تثبيت جميع المهام المستخدمة في مشروع Gulp.

إذا كنت لا تزال لا تفهم ذلك ، فربما تحتاج إلى Diane لتشرح ذلك بشكل أفضل - ما هي مشكلتي / هوسي بـ Black-ish ؟؟

بعد التشغيل npm-init، اكتب npm install gulp --save-dev، هذا يوجه npm لتثبيت Gulp في مشروعك. باستخدام--save-dev نقوم بتخزين Gulp كاعتماد على dev في package.json.

إنشاء ملف Gulp

الآن بعد أن قمت بتثبيت Gulp ، فأنت جاهز لتثبيت المهمة الأولى. عليك أن requireتبلع. قم بإنشاء ملف جديد يسمى gulpfile.js في دليل المشروع - يمكنك القيام بذلك باستخدام أي محرر نصوص. ابدأ بإضافة الكود أدناه إلى ملف gulp.

‘use strict’;
var gulp = require(‘gulp’);

إعداد مهمة

يمكنك الآن تثبيت مهمة gulp - في هذه الحالة سنقوم بتثبيت Gulp-sass. هذه المهمة تجعل من الممكن تحويل Sass إلى CSS . لا تزال تستخدم سطر الأوامر ، يمكنك تثبيت Gulp-sass عن طريق التشغيل npm install gulp-sass --save-dev. بعد ذلك ، اطلب Gulp-sass في gulpfile.js.

ضع var sass = require(‘gulp-sass’);تحت الخط الذي طلبته بلع.

هيكلة مشروعك

قبل استخدام الأسطر أدناه ، أفترض أيضًا أنك تعرف كيفية هيكلة تطبيق ويب. سأستخدم هنا بنية تطبيقات الويب الشائعة.

تجميع sass / scss

آخر شيء إذن هو توجيه gulp للملفات التي يحتاجها لتحويلها وأين يجب أن تكون الوجهة - حيث سيتم تخزين ملف الإخراج.

استخدم ما يلي؛

//compile gulp.task(‘sass’, function () { gulp.src(‘app/scss/app.scss’) .pipe(sass().on(‘error’, sass.logError)) .pipe(gulp.dest(‘app/css’)); });

سيتم تحويل الملف الموجود في gulp.src ، ويمكنك أيضًا تحديد جميع ملفات .scss في دليل باستخدام “app/scss/*.scss”. سيؤدي هذا إلى تحديد جميع ملفات .scss في المجلد scss.

و gulp.dest هو الإخراج. سيتم تخزين الإخراج في مجلد CSS داخل مجلد التطبيق.

غلب ووتش ساس

يحتوي Gulp على صيغة ساعة تسمح له بمراقبة ملفات المصدر ثم "مشاهدة" التغييرات التي تم إجراؤها على التعليمات البرمجية الخاصة بك. ما عليك سوى إضافة الصيغة إلى gulpfile.js بكتابة:

//compile and watch gulp.task(‘sass:watch’, function() { gulp.watch(‘app/scss/app.scss’, [‘sass’]);});

هذا إلى حد كبير كل ما عليك القيام به! لم يكن ذلك مرهقًا ، أم أنه كان كذلك؟

شكرا للقراءة!