gulp

스트리밍 빌드 시스템

Gulp 란 무엇입니까?

• 자동화 - Gulp는 개발 워크 플로우에서 고통 스럽거나 시간이 많이 걸리는 작업을 자동화하는 데 도움이되는 툴킷입니다.
• 플랫폼 공연 - 통합은 모든 주요 IDE에 내장되며 PHP, .NET, Node.js, Java 및 기타 플랫폼과 함께 Gulp를 사용하고 있습니다.
• 강력한 생태계 - NPM 모듈을 사용하여 원하는 모든 것을 수행하여 파일 변환을 위해 3000 개가 넘는 큐 레이트 된 플러그인을 수행하십시오.
• 단순 - 최소한의 API 표면 만 제공하면 Gulp는 배우기 쉽고 사용하기 간단합니다.

설치

빠른 시작 가이드를 따르십시오.

로드맵

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 ; 

gulpile에서 최신 JavaScript 버전을 사용하십시오

Gulp는 package.json 코드에로드 될 래퍼를 제공하므로 GulpFile을 gulpfile.mjs 또는 "type": "module" 으로 이름을 지정할 수 있습니다.

그리고 여기에 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가 종료 될 때 손실됩니다. images 작업을 두 번째로 실행할 때 watch 작업 중에 시간을 절약합니다.

기여하고 싶습니까?

누구나이 프로젝트를 개선하도록 도울 수 있습니다. 기고 가이드를 확인하십시오!