تثبيت node.js
أولاً ، تحتاج إلى تثبيت node.js. بشكل عام ، تحتاج فقط إلى تنزيل حزمة التثبيت وتثبيتها في الموقع الرسمي لـ Node.js. لكنني فشلت بشكل مخجل ، وظهر الخطأ التالي:
لذلك تغيرت إلى Brew Dafa:
مشروب تثبيت nodejs
تثبيت Gulp
تم تثبيت Gulp باستخدام أمر NPM لـ Node.js:
تثبيت NPM -Global Gulp
ثم قم بتثبيته في دليل المشروع:
تثبيت NPM-Save-Dev Gulp
أنا في حيرة من هذه الخطوة. من خلال سنوات خبرتي العديدة كمبرمجة ، حتى لو تم تثبيت التثبيت العالمي ، فيجب أن يكون متاحًا عند استخدامه. لكن من الواضح أن Gulp ليس هكذا. إذا لم تقم بتنفيذ هذه الخطوة في دليل المشروع ، فسيتم مطالب الخطأ التالي عند استخدام أمر GULP:
... لم يتم العثور على بلع محلي في ...
... حاول التشغيل: NPM تثبيت Gulp
أخيرًا ، قم بتنفيذ أمر GULP في دليل المشروع. إذا تم إخراج المحتوى التالي ، فهذا يعني أن التثبيت قد اكتمل:
... لم يتم العثور على gulpfile
مثال بسيط
يوضح ما يلي استخدام Gulp لإنشاء خادم تطوير موقع ويب ثابت ويدعم وظيفة التحديث المباشر (LiverLoad).
أولاً ، تحتاج إلى تثبيت المكون الإضافي للمتصفح لـ Livereload. عنوان المكون الإضافي هو: http://livereload.com/extensions/ ، الذي يدعم ثلاثة متصفحات رئيسية: Chrome و Firefox و Safari. بعد تثبيت المكون الإضافي ، سيظهر زر على المتصفح. هذا الزر له دولتين. تشير النقاط الصلبة إلى تمكين المكون الإضافي ، وتشير النقاط المجوفة إلى أنه لم يتم تمكين المكون الإضافي. تذكر أن تتذكر!
ثم قم بإنشاء بنية مشروع بسيطة:
./gulpfile.js./public/./public/index.html
استخدم الأمر التالي لتثبيت Gulp والمكونات ذات الصلة:
تثبيت NPM-Save-Dev Gulp Gulp-Connect
Gulp-Connect هو مكون إضافي GULP يوفر وظائف خادم ويب ثابت ويدمج وظائف Livereload.
بعد ذلك ، تحتاج إلى تحرير ملف gulpfile.js ، المحتوى كما يلي:
var gulp = require ('gulp') ، connect = require ('gulp-connect') gulp.task ('server' ، function () {connect.server ({root: 'public' ، livereload: true})}) gulp.task ('html' ، function () {gulp.src ('./ public/. }) gulp.task ('watch' ، function () {gulp.watch (['./ public/*.أخيرًا قم بتشغيل خادم الويب هذا:
بلع
افتح المتصفح وقم بزيارة http: // localhost: 4000. ثم حاول تعديل محتوى ملف index.html وحفظه. في ظل الظروف العادية ، يجب على جانب المتصفح تحديث المحتوى المعدل تلقائيًا وعرضه.
مقارنة بسيطة بين Gulp و Grunt
دعونا نلقي نظرة على مثال ، بناء Sass في Gulp و Grunt على التوالي:
الناخر:
sass: {dist: {stype: {style: 'sexted'} ، الملفات: {'dist/alctets/css/main.css': 'src/styles/main.scss' ،}}} ، autoprefixer: {dist: {{browsers: ['last 2 version' ، 12.1 '،' iOS 6 '،' Android 4 ']} ، src:' dist/css/main.css '، dest:' dist/css/main.css '}} ، grunt.registerTask (' styles '، [' sass '،' autoprefixer ']) ؛تحتاج Grunt إلى تكوين المكونات الإضافية بشكل منفصل وتحديد مسار المصدر والوجهة. على سبيل المثال ، نأخذ أرشيف كمدخلات إلى SASS في SASS وتخزين نتائج الإخراج. عند إعداد AutoPrefixer ، تحتاج إلى استخدام إخراج SASS كمدخل لإنشاء ملف جديد. لنلقي نظرة على نفس التكوين في Gulp:
بلع:
gulp.task ('sass' ، function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'compressed'})). .pipe (gulp.dest ('dist/assets/css'))}) ؛في Gulp ، نحتاج فقط إلى إدخال ملف. بعد معالجة المكونات الإضافية ، يتم تمريرها بعد ذلك إلى Autoprefixer المكونات ، وأخيراً يتم الحصول على ملف. هذه العملية تسرع عملية البناء ، والقضاء على القراءة والكتابة ملفات غير ضرورية ، وتتطلب فقط ملفًا نهائيًا.