gulp

نظام بناء البث

ما هو gulp؟

• الأتمتة - Gulp هي مجموعة أدوات تساعدك على أتمتة المهام المؤلمة أو المستهلكة للوقت في سير عمل التطوير الخاص بك.
• منصة - لا يتم دمج التكامل في جميع المعرفات الرئيسية والأشخاص يستخدمون Gulp مع PHP و .NET و Node.js و Java وغيرها من المنصات.
• النظام الإيكولوجي القوي - استخدم وحدات NPM لفعل أي شيء تريده + أكثر من 3000 مكونات مكون من 3000 مكونات منسق لدفقات التحويلات.
• بسيط - من خلال توفير سطح API الحد الأدنى فقط ، من السهل التعلم وبسيط للاستخدام.

تثبيت

اتبع دليل البدء السريع لدينا.

خريطة الطريق

تعرف على جميع القضايا التي لدينا في العمل والمشكلات المتميزة على https://github.com/orgs/gulpjs/projects.

الوثائق

تحقق من دليل البدء ومستندات API على موقعنا!

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

عينة gulpfile.js

سيعطيك هذا الملف طعمًا لما يفعله Gulp.

 var gulp = require ( 'gulp' ) ;
var less = require ( 'gulp-less' ) ;
var babel = require ( 'gulp-babel' ) ;
var concat = require ( 'gulp-concat' ) ;
var uglify = require ( 'gulp-uglify' ) ;
var rename = require ( 'gulp-rename' ) ;
var cleanCSS = require ( 'gulp-clean-css' ) ;
var del = require ( 'del' ) ;

var paths = {
  styles : {
    src : 'src/styles/**/*.less' ,
    dest : 'assets/styles/'
  } ,
  scripts : {
    src : 'src/scripts/**/*.js' ,
    dest : 'assets/scripts/'
  }
} ;

/* Not all tasks need to use streams, a gulpfile is just another node program
 * and you can use all packages available on npm, but it must return either a
 * Promise, a Stream or take a callback and call it
 */
function clean ( ) {
  // You can use multiple globbing patterns as you would with `gulp.src`,
  // for example if you are using del 2.0 or above, return its promise
  return del ( [ 'assets' ] ) ;
}

/*
 * Define our tasks using plain functions
 */
function styles ( ) {
  return gulp . src ( paths . styles . src )
    . pipe ( less ( ) )
    . pipe ( cleanCSS ( ) )
    // pass in options to the stream
    . pipe ( rename ( {
      basename : 'main' ,
      suffix : '.min'
    } ) )
    . pipe ( gulp . dest ( paths . styles . dest ) ) ;
}

function scripts ( ) {
  return gulp . src ( paths . scripts . src , { sourcemaps : true } )
    . pipe ( babel ( ) )
    . pipe ( uglify ( ) )
    . pipe ( concat ( 'main.min.js' ) )
    . pipe ( gulp . dest ( paths . scripts . dest ) ) ;
}

function watch ( ) {
  gulp . watch ( paths . scripts . src , scripts ) ;
  gulp . watch ( paths . styles . src , styles ) ;
}

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp . series ( clean , gulp . parallel ( styles , scripts ) ) ;

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports . clean = clean ;
exports . styles = styles ;
exports . scripts = scripts ;
exports . watch = watch ;
exports . build = build ;
/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports . default = build ; 

استخدم أحدث إصدار من JavaScript في Gulpfile

يوفر Gulp غلافًا سيتم تحميله في رمز ESM الخاص بك ، بحيث يمكنك تسمية Gulpfile كـ gulpfile.mjs أو مع "type": "module" المحددة في ملف package.json الخاص بك.

وهنا نفس العينة من أعلاه المكتوبة في esnext .

 import { src , dest , watch } from 'gulp' ;
import less from 'gulp-less' ;
import babel from 'gulp-babel' ;
import concat from 'gulp-concat' ;
import uglify from 'gulp-uglify' ;
import rename from 'gulp-rename' ;
import cleanCSS from 'gulp-clean-css' ;
import del from 'del' ;

const paths = {
  styles : {
    src : 'src/styles/**/*.less' ,
    dest : 'assets/styles/'
  } ,
  scripts : {
    src : 'src/scripts/**/*.js' ,
    dest : 'assets/scripts/'
  }
} ;

/*
 * For small tasks you can export arrow functions
 */
export const clean = ( ) => del ( [ 'assets' ] ) ;

/*
 * You can also declare named functions and export them as tasks
 */
export function styles ( ) {
  return src ( paths . styles . src )
    . pipe ( less ( ) )
    . pipe ( cleanCSS ( ) )
    // pass in options to the stream
    . pipe ( rename ( {
      basename : 'main' ,
      suffix : '.min'
    } ) )
    . pipe ( dest ( paths . styles . dest ) ) ;
}

export function scripts ( ) {
  return src ( paths . scripts . src , { sourcemaps : true } )
    . pipe ( babel ( ) )
    . pipe ( uglify ( ) )
    . pipe ( concat ( 'main.min.js' ) )
    . pipe ( dest ( paths . scripts . dest ) ) ;
}

 /*
  * You could even use `export as` to rename exported tasks
  */
function watchFiles ( ) {
  watch ( paths . scripts . src , scripts ) ;
  watch ( paths . styles . src , styles ) ;
}
export { watchFiles as watch } ;

const build = gulp . series ( clean , gulp . parallel ( styles , scripts ) ) ;
/*
 * Export a default task
 */
export default build ; 

بنيات تدريجية

يمكنك تصفية الملفات التي لم تتغير بين تشغيل مهمة باستخدام وظيفة gulp.src since خيار و gulp.lastRun :

 const paths = {
  ...
  images : {
    src : 'src/images/**/*.{jpg,jpeg,png}' ,
    dest : 'build/img/'
  }
}

function images ( ) {
  return gulp . src ( paths . images . src , { since : gulp . lastRun ( images ) } )
    . pipe ( imagemin ( ) )
    . pipe ( gulp . dest ( paths . images . dest ) ) ;
}

function watch ( ) {
  gulp . watch ( paths . images . src , images ) ;
}

يتم حفظ أوقات تشغيل المهام في الذاكرة وفقدان عندما يخرج Gulp. سيوفر الوقت فقط أثناء مهمة watch عند تشغيل مهمة images للمرة الثانية.

تريد المساهمة؟

يمكن لأي شخص المساعدة في جعل هذا المشروع أفضل - تحقق من دليل المساهمة لدينا!