مقدمة إلى Gulp:
Gulp هي أداة لبناء رمز في تطوير الواجهة الأمامية وأداة قوية لبناء مشاريع أتمتة. لا يمكن فقط تحسين موارد الموقع ، ولكن يمكن أيضًا إكمال العديد من المهام المتكررة تلقائيًا باستخدام الأدوات الصحيحة أثناء عملية التطوير. معها ، لا يمكننا كتابة التعليمات البرمجية بسعادة فحسب ، ولكن أيضًا تحسين كفاءة عملنا بشكل كبير.
Gulp هو عداء مهمة تلقائي يعتمد على NodeJS. يمكنه تلقائيًا إكمال الاختبار ، والتحقق ، والاندماج ، والضغط ، والتنسيق ، وتحديث المتصفح التلقائي ، وتوليد ملفات النشر من ملفات مثل JavaScript/Coffee/Sass/Less/HTML/Image/CSS ، والاستماع لتكرار الخطوات المحددة بعد تغيير الملف. من حيث التنفيذ ، استعارت فكرة الأنبوب لنظام التشغيل UNIX. أصبح إخراج المستوى السابق مباشرة إدخال المستوى التالي ، مما يجعل العملية بسيطة للغاية. من خلال هذه المقالة ، سوف نتعلم كيفية استخدام Gulp لتغيير عملية التطوير ، مما يجعل التطوير أسرع وأكثر كفاءة.
تشبه Gulp إلى حد كبير Grunt ، ولكن مقارنة مع عمليات IO المتكررة لـ Grunt ، يمكن أن تكمل عمليات البث في Gulp أعمال البناء بشكل أسرع وأكثر ملاءمة.
عندما كنت أتعلم Gulp اليوم ، استخدمت Gulp-uglify لضغط وحدة JS. واجهت مشكلة - عند استخدام Gulp.Watch للاستماع إلى التغييرات في ملفات JS ، واجهت مشاكل ضغط متكررة.
هيكل الدليل كما يلي:
رمز gulpfile.js كما يلي:
var gulp = require ('gulp') ؛ var uglify = require ('gulp-uglify') ؛ var rewame = require ('gulp-redame') ؛ gulp.task ('uglify' ، function () {gulp.src ('./ src/js/*. Gulp.Watch ('./ src/js/*.بعد تنفيذ أمر Gulp Uglify:
يتم إنشاء *.min.js المقابلة:
ولكن عندما أفتح ملف kong.js وحفظه مرة أخرى ، يحدث الموقف التالي:
احفظه مرة واحدة ثم ضغطه مرة أخرى. سيكون هناك العديد من الملفات المضغوطة JS مثل *.min.min ... JS ، وسوف تتغير قيمة Kong.min.js الأولى فقط وفقًا لـ Kong.js. في وقت لاحق ، راجعت المستند التالي وكتب أحدهم عن Gulp-uglify ووجدت أنه يمكن استخدامه! لتصفية min.js ، منعه من الضغط ، قم بتغيير الكود:
var gulp = require ('gulp') ؛ var uglify = require ('gulp-uglify') ؛ var releame = require ('gulp-redame') ؛ gulp.task ('uglify' ، function () {gulp.src (['./ src/js/* Gulp.Watch ('./ src/js/*.ما سبق هو مقدمة المحرر إلى Gulp-uglify و gulp.watch () عند استخدامها بالاقتران مع Gulp.Watch (). آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!