gulp

Система потоковой сборки

Что такое Gulp?

• Автоматизация - Gulp - это инструментарий, который помогает вам автоматизировать болезненные или трудоемкие задачи в вашем рабочем процессе разработки.
• Платформа -агрессия - интеграции встроены во все основные IDE, и люди используют Gulp с PHP, .net, Node.js, Java и другими платформами.
• Сильная экосистема - используйте модули 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 ; 

Используйте последнюю версию 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 во второй раз.

Хотите внести свой вклад?

Любой может помочь сделать этот проект лучше - ознакомьтесь с нашим руководством!