gulp

Das Streaming -Build -System

Was ist Schlupf?

• Automatisierung - Gulp ist ein Toolkit, mit dem Sie schmerzhafte oder zeitaufwändige Aufgaben in Ihrem Entwicklungsworkflow automatisieren können.
• Plattform -Agnostic - Integrationen sind in alle wichtigen IDES integriert, und Personen verwenden Gulp mit PHP, .NET, Node.js, Java und anderen Plattformen.
• Starkes Ökosystem - Verwenden Sie NPM -Module, um alles zu tun, was Sie wünschen. + Über 3000 kuratierte Plugins für Streaming -Dateitransformationen.
• Einfach - Durch die Bereitstellung einer minimalen API -Oberfläche ist Gulp leicht zu lernen und einfach zu bedienen.

Installation

Folgen Sie unserem Kurzanleitung.

Roadmap

Informieren Sie sich über all unsere Work-in-progressiven und herausragenden Probleme unter https://github.com/orgs/gulpjs/projects.

Dokumentation

Schauen Sie sich den Leitfaden und die API -Dokumente auf unserer Website an!

Entschuldigen Sie unseren Staub! Alle anderen Dokumente werden zurück sein, bis wir alles aktualisieren. Bitte öffnen Sie ein Problem, wenn etwas nicht funktioniert.

Probe gulpfile.js

Diese Datei gibt Ihnen einen Vorgeschmack auf das, was Schlupf tut.

 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 ; 

Verwenden Sie die neueste JavaScript -Version in Ihrem Gulpfile

Gulp bietet einen Wrapper, der in Ihrem ESM -Code geladen wird, sodass Sie Ihre Gulpfile als gulpfile.mjs oder mit "type": "module" benennen können, die in Ihrer package.json -Datei angegeben sind.

Und hier ist das gleiche Beispiel von oben geschrieben in 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 ; 

Inkrementelle Builds

Sie können unveränderte Dateien zwischen den Ausführungen einer Aufgabe unter Verwendung der gulp.src -Funktion since Option und gulp.lastRun herausfiltern:

 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 ) ;
}

Aufgabenlaufzeiten werden im Gedächtnis gespeichert und gehen verloren, wenn Schlupfläufe beendet. Es spart nur Zeit während der watch , wenn die images zum zweiten Mal ausgeführt werden.

Willst du einen Beitrag leisten?

Jeder kann dazu beitragen, dieses Projekt besser zu machen. Schauen Sie sich unseren Beitragsführer an!