NPM تثبيت Gulp-save-dev
ما هو gulp؟
Gulp هو جيل جديد من أدوات بناء المشاريع الأمامية. يمكنك استخدام Gulp و Plugins الخاصة به لتجميع رمز المشروع الخاص بك (أقل ، SASS) ، ويمكن أيضًا ضغط رمز JS و CSS ، وحتى ضغط صورك. يحتوي Gulp فقط على كمية صغيرة من API ، لذلك من السهل جدًا التعلم. يستخدم Gulp دفق لمعالجة المحتوى. ولدت العقدة عددًا من أدوات التشغيل الآلي ، مثل Bower ، Yeoman ، Grunt ، إلخ.
أوجه التشابه والاختلافات بين Gulp و Grunt
سهل الاستخدام: استخدام الكود عبر استراتيجيات التكوين ، يحافظ Gulp على أشياء بسيطة ومعقدة يمكن التحكم فيها.
كفاءة: من خلال الاستفادة من الدفق القوي لـ Node.js ، يمكنك إكمال البناء بشكل أسرع دون كتابة ملفات وسيطة إلى القرص.
جودة عالية: إرشادات البرنامج المساعد الصارم لـ Gulp لضمان أن تكون الإضافات بسيطة وتعمل بالطريقة التي تتوقعها بها.
من السهل التعلم: عن طريق التقليل من واجهات برمجة التطبيقات ، يمكنك تعلم Gulp في وقت قصير جدًا. إن أعمال البناء هي تمامًا كما تخيلت: إنها سلسلة من خطوط أنابيب التدفق.
نظرًا لأن Gulp مكتوب في Node.js ، تحتاج إلى تثبيت NPM على المحطة الخاصة بك. NPM هو مدير حزمة Node.js ، لذلك قم أولاً بتثبيت Node.js على جهازك.
أمر تثبيت GULP
Sudo NPM تثبيت -g gulp
قم بإنشاء ملف package.json جديد في دليل الجذر
NPM init.
قم بتثبيت حزمة Gulp
بعد التثبيت ، أدخل Gulp -V مرة أخرى لعرض رقم الإصدار ، كما هو موضح في الشكل التالي ، إنه ناجح:
تثبيت المكونات الإضافية
تثبيت الإضافات شائعة الاستخدام:
تجميع Sass (Gulp-Ruby-Sass)
إضافة بادئة CSS تلقائيًا (Gulp-Autoprefixer)
CSS المضغوطة (Gulp-Minify-CSS)
التحقق من رمز JS (Gulp-Jshint)
دمج ملفات JS (Gulp-Concat)
رمز JS المضغوط (Gulp-uglify)
صورة مضغوطة (gulp-imagemin)
تحديث الصفحة تلقائيًا (Gulp-Livereload)
ذاكرة التخزين المؤقت للصورة ، فقط إذا تم استبدال الصورة (ذاكرة التخزين المؤقت)
تذكير تغيير (Gulp-Notify)
امسح الملف (DEL)
لتثبيت هذه الإضافات ، تحتاج إلى تشغيل الأمر التالي:
نسخة الكود كما يلي:
$ NPM تثبيت Gulp-ruby-sass gulp-autoprefixer gulp-minify-CSS Gulp-Jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-gulp-livereload gulp-cache del-save-dev-dev-dev-dev-dev-dev-def
يمكن أن يوفر لك -save و -save -dev الخطوات لتعديل ملف package.json يدويًا.
NPM تثبيت الوحدة النمطية -
إضافة أرقام الوحدة النمطية والأرقام تلقائيًا إلى قسم التبعيات
NPM تثبيت الوحدة النمطية-seve-dev
إضافة أرقام الوحدة النمطية والنسخة تلقائيًا إلى قسم DevDependencies
قيادة Gulp
ما عليك سوى معرفة 5 أوامر Gulp
Gulp.Task (Name [، DEPS] ، FN) تحديد اسم المهمة: اسم المهمة DEPS: DEPERENCY NAME
Gulp.Run (المهام ...): قم بتشغيل مهام متعددة بالتوازي أكبر عدد ممكن
Gulp.Watch (Glob ، FN): عندما يتغير محتوى GLOB ، قم بتنفيذ FN
Gulp.Src (Glob): اضبط المسار على الملف المراد معالجته ، والذي يمكن أن يكون ملفات متعددة في شكل صفيف ، أو يمكن أن يكون منتظمًا
Gulp.dest (Path [، Options]): اضبط المسار لإنشاء الملف
Glob: يمكن أن يكون مسار ملف مباشر. معناه هو مطابقة النمط.
الملفات التي سيتم معالجتها بواسطة الإضافات المتعلقة بأدلة GULP من خلال واجهة برمجة تطبيقات خط الأنابيب (PIPE ()). تنفيذ مهام معالجة الملفات من خلال المكونات الإضافية.
gulp.task ('default' ، function () {...}) ؛يتم استخدام API Gulp.Task لإنشاء المهام. يمكنك إدخال $ gulp [افتراضي] على سطر الأوامر (اختياري للأقواس) لأداء المهام أعلاه.
وثائق API الرسمية Gulp: https://github.com/gulpjs/gulp/blob/master/docs/api.md
مجموعة Gulp Plug-in: http://gulpjs.com/plugins/
ابدأ في بناء المشروع
قم بإنشاء ملف gulpfile.js جديد في دليل جذر المشروع والصق الكود التالي:
// إدخال الإضافات Gulp و Uglify في دليل جذر المشروع var gulp = require ('gulp') ؛ var uglify = require ('gulp-uglify') ؛ gulp.task ('lembress' ، function () {return gulp.src ('script/.ملاحظة: لا يمكن تغيير اسم ملف gulpfile.js.
يحتاج المشروع إلى استخدام Uglify وإعادة تسمية المكونات الإضافية ، وتنفيذ الأمر التالي للتثبيت:
تثبيت NPM-تثبيت Gulp-uglifynpm-save-dev gulp-briname
خذ المثال الخاص بي ، أدخل الدليل حيث يوجد gulpfile.js:
CD/المستخدمين/TrigKit4/Gulp-Test
ثم أدخل:
var gulp = require ('gulp') ؛ var uglify = require ('gulp-uglify') ؛ var rewame = require ('gulp-regl') ؛ gulp.task ('compress' ، function () {return gulp.src ('script/. .pipe (gulp.dest ('dist')) ؛}) ؛سيقوم هذا الأمر بتثبيت جميع التبعيات ضمن package.json ، كما هو موضح في الشكل التالي:
كاملة gulpfile.js
// load plug-in var gulp = require ('gulp') ، sass = require ('gulp-ruby-sass') ، autoprefixer = require ('gulp-autoprefixer') ، minifycss = require ('gulp-minify-css') ، jShint = require ('gulp-jshint') ، uglify = 'gulp-uglify ، ugemin. تتطلب ('gulp-imagemin') ، إعادة تسمية = مطلوبة ('gulp-briname') ، clean = require ('gulp-clean') ، concat = requist ('gulp-concat') ، etreify = require ('gulp-notify') ، cache = require ('gulp-cache') ، livereload = require ('gulp-debloidead') ؛ // style gulp.task ('styles' ، function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'sexted' ،}) 4 ')) .pipe (gulp.dest (' dist/styles ')) .pipe (إعادة تسمية ({لاحقة:'. min ')) .pipe (minifycss ()) .pipe (gulp.dest (' dist/styles '). // script gulp.task ('scripts' ، function () {return gulp.src ('src/scripts/**/*. .pipe (concat ('main.js')) .pipe (gulp.dest ('dist/scripts')) .pipe ({{fuckix: '.min'})) .pipe (uglify ()) .pipe (gulp.dest ('dist/scripts') .pipe ( // image gulp.task ('Images' ، function () {return gulp.src ('src/images/**/*') .pipe (cache ({{exptimizationlevel: 3 ، progressive: true ، interlaced: ust}))). // clean gulp.task ('clean' ، function () {return gulp.src (['dist/styles' ، 'dist/scripts' ، 'dist/images'] ، {read: false}) .pipe (clean ()) ؛}) ؛ // preset task gulp.task ('default' ، ['clean'] ، function () {gulp.start ('Styles' ، 'Scripts' ، 'Images') ؛}) ؛ // Guard gulp.task ('watch' ، function () {// all all .scss files gulp.Watch ('src/styles/**/*. Gulp.Watch ('src/scripts/**. Gulp.Watch (['dist/**']). on ('change' ، function (file) {server.changed (file.path) ؛}) ؛ }) ؛ملاحظة: PIPE () هي طريقة لتمرير تدفقات البيانات في وحدة الدفق. المعلمة الأولى هي طريقة المكونات. سيتلقى المكون الإضافي ملفات تتدفق من المنبع ، ثم تتدفق لأسفل.
gulp.task ('اسم المهمة' ، function () {return gulp.src ('file path') .pipe (...) .pipe (...) // حتى الخطوة الأخيرة من Task.pipe (...) ؛}) ؛المكون الإضافي GULP
صفحات Gulp-Gh: استخدم Gulp لإنشاء مستندات HTML عن طريق Markdown وتحميلها على صفحات git
https://github.com/shinnn/gulp-gh-fages
var gulp = require ('gulp') ؛ var ghpages = require ('gulp-gh-pages') ؛ gulp.task ('deploy' ، function () {return gulp.src ('./ dist/**/*') .pipe (ghpages ()) ؛}) ؛Pulp-Jade Plugin: تجميع اليشم في ملف HTML
المكون الإضافي أقل من Gulp: ترجمة أقل في ملف CSS
var less = tree ('gulp-ann ’) ؛ var path = requist (' path ') ؛ gulp.task ('less' ، function () {return gulp.src ('./ less/**/*. less') .pipe ({{paths: [path.join (__ dirname ، 'less' ، ') ؛ = طلب ('gulp') ؛ var gls = يحتاج ('gulp-live-server') ؛ gulp.task ('serves' ، function () {// 1. '.tmp']) ؛يمكن أن يحفظ Gulp-Livereload وتحديثه في الوقت الفعلي ، لذلك ليست هناك حاجة للضغط على F5 وتبديل الواجهة
gulp-load-plugins: قم بتحميل البرنامج المساعد التعسفي تلقائيًا في ملف package.json الخاص بك
$ NPM تثبيت-save-dev gulp-load-plugins
على سبيل المثال ، ملف Package.json معين كما يلي:
{"التبعيات": {"Gulp-Jshint": "*" ، "Gulp-Concat": "*"}}أضف الكود التالي في gulpfile.js:
var gulp = required ('gulp') ؛ var gulploadplugins = require ('gulp-load-plugins') ؛ var plugins = gulploadplugins () ؛ plugins.jshint = require ('gulp-jshint') ؛ plugins.concat = require ('gulp-concat') ؛Gulp-Babel: Pulp's Babel Plugin ،
تثبيت $ NPM-save-dev gulp-babel-preset-es2015
كيفية استخدام:
const gulp = require ('gulp') ؛ const babel = require ('gulp-babel') ؛ gulp.task ('default' ، () => {return gulp.src ('src/app.js') .pipe (babel ({presets: ['es2015']).GitHub الرسمي: https://github.com/gulpjs/gulp