gulp

ระบบสร้างสตรีมมิ่ง

อึกคืออะไร?

• Automation - Gulp เป็นชุดเครื่องมือที่ช่วยให้คุณทำงานที่เจ็บปวดหรือใช้เวลานานในเวิร์กโฟลว์การพัฒนาของคุณ
• Platform -Agnostic - การรวมเข้าด้วยกันใน IDE ที่สำคัญทั้งหมดและผู้คนกำลังใช้ Gulp กับ PHP, .NET, Node.js, Java และแพลตฟอร์มอื่น ๆ
• ระบบนิเวศที่แข็งแกร่ง - ใช้โมดูล NPM เพื่อทำสิ่งที่คุณต้องการ + มากกว่า 3000 ปลั๊กอินที่ได้รับการดูแลสำหรับการแปลงไฟล์สตรีมมิ่ง
• ง่าย - โดยการให้พื้นผิว API น้อยที่สุดอึกนั้นง่ายต่อการเรียนรู้และใช้งานง่าย

การติดตั้ง

ทำตามคำแนะนำการเริ่มต้นด่วนของเรา

แผนงาน

ค้นหาข้อมูลเกี่ยวกับปัญหาการทำงานและความคืบหน้าทั้งหมดของเราที่ https://github.com/orgs/gulpjs/projects

เอกสาร

ตรวจสอบคู่มือการเริ่มต้นใช้งานและเอกสาร API บนเว็บไซต์ของเรา!

แก้ตัวฝุ่นของเรา! เอกสารอื่น ๆ ทั้งหมดจะอยู่ข้างหลังจนกว่าเราจะได้รับการอัปเดตทุกอย่าง กรุณาเปิดปัญหาหากมีบางอย่างไม่ทำงาน

ตัวอย่าง gulpfile.js

ไฟล์นี้จะทำให้คุณได้ลิ้มรสสิ่งที่อึก

 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 จัดเตรียม wrapper ที่จะโหลดในรหัส 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 ) ;
}

เวลาทำงานจะถูกบันทึกไว้ในหน่วยความจำและหายไปเมื่ออึกออก มันจะประหยัดเวลาในระหว่างงาน watch เมื่อรันงาน images เป็นครั้งที่สอง

ต้องการมีส่วนร่วม?

ทุกคนสามารถช่วยทำให้โครงการนี้ดีขึ้น - ตรวจสอบคู่มือการสนับสนุนของเรา!