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

صورة الائتمان

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

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

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

تثبيت العقدة

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

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

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

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

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

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

خلق Gulpfile

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

"استخدام صارم" ؛
var gulp = require ('gulp')

إعداد مهمة

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

ضع var sass = require (ul gulp-sass ’) ؛ وتحت الخط الذي تطلبه غالب

هيكلة المشروع الخاص بك

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

تجميع ساس / scss

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

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

// تجميع
 gulp.task ('sass'، function () {
 gulp.src ( 'التطبيق / SCSS / app.scss')
 .pipe (sass (). on ('error'، sass.logError))
 .pipe (gulp.dest ( 'التطبيق / المغلق'))؛
 })؛

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

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

بلع-الساعات ساس

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

// ترجمة ومشاهدة
 gulp.task ('sass: watch'، function () {
 gulp.watch (‘app / scss / app.scss’ ، [ass sass ’]) ؛
})؛

هذا كل ما عليك فعله! لم يكن ذلك مرهقًا أم لا؟

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