gulp setup

إعداد Gulp المثالي

يهدف هذا المشروع إلى إنشاء إعداد GULP معياري وقابل للتكوين. احصل على أتمتة المشروع وتشغيلها مع الحد الأدنى من المشاركة. تتم كتابة gulp-setup وصيانتها بواسطة @alexgrozav.

 npm install gulp-cli -g
npm install gulp gulp-load-plugins gulp-setup --save-dev

عينة gulpfile.js

إعداد Gulp باستخدام Gulp-Setup أبسط من أي وقت مضى.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp ) ; 

المهام الافتراضية

بشكل افتراضي ، يأتي Gulp-Setup مع مجموعة متنوعة من المهام مسبقًا.

 gulp
gulp build
gulp clean
gulp watch
gulp lint
gulp html
gulp html-lint
gulp css
gulp css-lint
gulp sass
gulp sass-lint
gulp stylus
gulp stylus-lint
gulp javascript
gulp javascript-lint
gulp coffeescript
gulp coffeescript-lint
gulp typescript
gulp typescript-lint
gulp fonts
gulp images
gulp browser-sync

بلع

ستقوم المهمة default بتشغيل سلسلة من build ، browser-sync ، watch ، كما كنت عادة في Gulp.

بنية البث

بشكل افتراضي ، ستقوم مهمة الإنشاء بتنفيذ المهمة clean ، وبعدها تدير جميع المهام الأخرى التي توفر معلمة pattern .

جرعة نظيفة

ستقوم هذه المهمة بإزالة مجلدات البناء والمواد الموجودة.

ساعة Gulp

ستشاهد مهمة watch التغييرات وإعادة بناء أي مهمة توفر معلمة pattern . بالإضافة إلى ذلك ، يقوم gulp-setup بإنشاء partials graph ، والذي سيعيد بناء أي ملف يعتمد على الموقع الذي تم تغييره.

بلعة الوبر

ستدير هذه المهمة أي مهمة تنتهي بـ -lint .

Gulp HTML

نسخ .html ملفات إلى مجلد الإنشاء ، ثم يفرغها وإخراجها في DIST.

Gulp CSS

Autoprefixes .css ملفات وإخراجها إلى مجلد الإنشاء ، ثم يصرخها وإخراجها في dist.

بلع ساس

تجميع ملفات Autoprefixes .sass و .scss وإخراجها إلى مجلد الإنشاء ، ثم يقوم بإعدادها وإخراجها في DIST.

_{تستخدم هذه المهمة partials graph ، مما يعني أن أي تغييرات على جزء ستؤدي إلى إعادة بناء على الملفات الأصل.}

بلع القلم

تجميع و autoprefixes .styl files وإخراجها إلى مجلد الإنشاء ، ثم يعتمد عليها وإخراجها في dist. يوفر مثيل Stylus أيضًا وظائف rucksack-css .

_{تستخدم هذه المهمة partials graph ، مما يعني أن أي تغييرات على جزء ستؤدي إلى إعادة بناء على الملفات الأصل.}

Gulp JavaScript

يجمع ملفات ES6 .js وإخراجها إلى مجلد الإنشاء ، ثم يعتمد عليها وإخراجها في DIST. يمكن لمهمة javascript استخدام إما webpack أو browserify لمعالجة الملفات وتجميعها ، المحددة باستخدام options.bundler Parameter (كما هو موضح في مثال التكوين أدناه).

_{تستخدم هذه المهمة partials graph ، مما يعني أن أي تغييرات على جزء ستؤدي إلى إعادة بناء على الملفات الأصل.}

غبوب القهوة

يجمع ملفات .coffee وإخراجها إلى مجلد الإنشاء ، ثم يقوم بتصويرها وإخراجها في DIST. كما هو الحال في مهمة javascript ، يمكنك استخدام إما webpack أو browserify لتجميع الملفات.

_{تستخدم هذه المهمة partials graph ، مما يعني أن أي تغييرات على جزء ستؤدي إلى إعادة بناء على الملفات الأصل.}

Gulp TypeScript

تجميع ملفات .ts وتخرجها إلى مجلد الإنشاء ، ثم يفرغها وإخراجها في DIST. كما هو الحال في مهمة javascript ، يمكنك استخدام إما webpack أو browserify لتجميع الملفات.

_{تستخدم هذه المهمة partials graph ، مما يعني أن أي تغييرات على جزء ستؤدي إلى إعادة بناء على الملفات الأصل.}

صور بلع

يحسن ملفات .svg و .jpg و .png و .gif وإخراجها إلى مجلدات الإنشاء والمواصفة.

خطوط بلع

نسخ .eot ، .svg ، .ttf ، .woff ، و .woff2 إلى مجلدات الإنشاء والمواصفة.

إعدادات

فيما يلي تكوين عينة لـ Gulp-Setup الذي يحدد خيارات مهمة javascript الافتراضية الحالية ، ويقوم بإنشاء مهمة Gulp جديدة تسمى javascript-ext من خلال توسيع نطاق javascript الأساسي. يمكنك تجاوز أي من معلمات المهمة الافتراضية عند تمديد المهمة.

يحدد مفتاح كائن tasks اسم مهمة Gulp.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  paths : {
    src : 'path/to/src' ,
    build : 'path/to/build' ,
    dist : 'path/to/dist'
  } ,
  cache : true ,
  debug : true ,
  tasks : {
    'javascript' : {
      options : {
        bundler : 'webpack'
      }
    } ,
    'javascript-ext' : {
      extends : 'javascript' ,
      paths : {
        src : 'path/to/custom-src'
      }
    }
  }
} ) ; 

كتابة مهمة

تم تصنيع المهام الموجودة في Gulp-setup من مكونين: process base . يتم توفير جميع المعلمات الأخرى ، مثل pattern ، في هذه المكونات.

 const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  tasks : {
    'mytask' : {
      base : './bases/base' ,
      process : './tasks/mytask' ,
      pattern : '**/*.css' ,
      paths : {
        src : 'path/to/custom-src' ,
        build : 'path/to/custom-build' ,
        dist : 'path/to/custom-dist'
      }
    }
  }
} ) ;

المهام الأساسية

المهمة base بمثابة قالب للمهام الأخرى. إنه يجعل أربعة خطافات خطوط أنابيب متاحة: init ، build ، dist و end لدمج العملية فيها. إذا كانت المهمة base مفقودة ، فإن process تعتبر مهمة مستقلة ولن تستخدم قالبًا.

 // bases/base.js

module . exports = ( $ , gulp , config , task ) => ( ) =>
  gulp . src ( $ . path . join ( config . task . src || config . paths . src , task . pattern ) )
    . pipe ( task . process . init ( ) )     // Initialization hook
    . pipe ( $ . debug ( ) )
    . pipe ( task . process . build ( ) )    // Building hook
    . pipe ( gulp . dest ( config . task . build || config . paths . build ) )
    . pipe ( task . process . dist ( ) )     // Distribution hook
    . pipe ( gulp . dest ( config . task . dist || config . paths . dist ) )
    . pipe ( task . process . end ( ) ) ;     // Ending hook

توفر لك حزمة Gulp-Setup القواعد الممتازة التالية: gulp-setup/bases/base ، gulp-setup/bases/compile و gulp-setup/bases/lint . يمكنك استخدام هذه القواعد لمهام العملية المخصصة الخاصة بك.

مهام العملية

مهمة العملية هي المعالجة الرئيسية التي تهتم بها المهمة. عادةً ما تستخدم مهام العملية قالبًا ، وهي مهمة base يتكاملون معها من خلال توفير السنانير init أو build أو dist أو end . بدلاً من ذلك ، يمكنك كتابة العملية كمهمة بلبلة مستقلة .

نموذج

 // tasks/mytask.js

module . exports = ( $ , gulp , config , task ) => ( {
  build : $ . lazypipe ( )
    . pipe ( $ . autoprefixer ) ,
  dist : $ . lazypipe ( )
    . pipe ( $ . cssmin )
} ) ;

مستقل

 // tasks/myclean.js

module . exports = ( $ , gulp , config , task ) => {
  return ( ) => gulp . src ( [ config . paths . build , config . paths . dist ] )
    . pipe ( $ . clean ( ) ) ;
} 

المساهمات والأخطاء وطلبات الميزات

هل لديك خطأ أو طلب ميزة؟ يرجى أولاً قراءة إرشادات المشكلة والبحث عن القضايا الحالية والمغلقة. إذا لم تتم معالجة مشكلتك أو فكرتك بعد ، فيرجى فتح مشكلة جديدة.