gulp setup

Идеальная установка глотка

Этот проект направлен на создание модульной и настраиваемой настройки глотка. Получите автоматизацию проекта с минимальным участием. Gulp-Setup написан и поддерживается @alexgrozav.

 npm install gulp-cli -g
npm install gulp gulp-load-plugins gulp-setup --save-dev

Образец gulpfile.js

Настройка Gulp с помощью Gulp Setup проще, чем когда-либо.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp ) ; 

По умолчанию задачи

По умолчанию Gulp-Setup поставляется в комплекте с различными готовыми задачами.

 gulp
gulp build
gulp clean
gulp watch
gulp lint
gulp html
gulp html-lint
gulp css
gulp css-lint
gulp sass
gulp sass-lint
gulp stylus
gulp stylus-lint
gulp javascript
gulp javascript-lint
gulp coffeescript
gulp coffeescript-lint
gulp typescript
gulp typescript-lint
gulp fonts
gulp images
gulp browser-sync

глоток

Задача default будет выполнять последовательность build , browser-sync и watch , как вы обычно делаете в Gulp.

Gulp Build

По умолчанию задача сборки выполнит clean задачу, после чего она выполняет все остальные задачи, которые обеспечивают параметр pattern .

Gulp Clean

Эта задача удалит существующие папки сборки и распределения.

Gulp Watch

Задача watch будет следить за изменениями и перестроить любую задачу, которая обеспечивает параметр pattern . В дополнение к этому, gulp-setup создает partials graph , который будет восстанавливать любой файл, который зависит от того, который был изменен.

Gulp Lint

Эта задача выполнит любую задачу, которая заканчивается -lint .

Gulp Html

Копии .html файлы в папку сборки, затем минифизирует их и выводит их в Dist.

Gulp CSS

AutoPrefixes .css файлы и выводит их в папку сборки, затем минифирует их и выводит их в Dist.

Gulp Sass

Компиляции и автоматические файлы .sass и .scss и выводат их в папку сборки, затем минифмы и выводит их в Dist.

_{Эта задача использует partials graph , что означает, что любые изменения в частичном, запускают восстановление в родительских файлах.}

Gulp Stylus

Компиляции и автоматические файлы .styl Стиловые файлы и выводит их в папку сборки, затем минифирует их и выводит их в Dist. Экземпляр Stylus также предоставляет функциональность rucksack-css .

_{Эта задача использует partials graph , что означает, что любые изменения в частичном, запускают восстановление в родительских файлах.}

Gulp JavaScript

Скомпилируют файлы es6 .js и выводит их в папку сборки, затем минифизирует их и выводит их в Dist. Задача javascript может использовать webpack или browserify для обработки и объединения файлов, указанных с использованием параметра options.bundler (как видно в примере конфигурации ниже).

_{Эта задача использует partials graph , что означает, что любые изменения в частичном, запускают восстановление в родительских файлах.}

Gulp CoffeeScript

Компилируют .coffee Files и выводит их в папку сборки, затем минифирует их и выводит их в Dist. Как и в задаче javascript , вы можете использовать webpack или browserify для объединения файлов.

_{Эта задача использует partials graph , что означает, что любые изменения в частичном, запускают восстановление в родительских файлах.}

TypeScript

Компилируют .ts Files и выводит их в папку сборки, затем минифирует их и выводит их в Dist. Как и в задаче javascript , вы можете использовать webpack или browserify для объединения файлов.

_{Эта задача использует partials graph , что означает, что любые изменения в частичном, запускают восстановление в родительских файлах.}

Gulp Images

Оптимизирует файлы .svg , .jpg , .png и .gif и выводит их в папки сборки и Dist.

шрифты

Копии .eot , .svg , .ttf , .woff и .woff2 в папки сборки и дисти.

Конфигурация

Вот образец конфигурации для Sulp Setup, которая устанавливает параметры для существующей задачи javascript по умолчанию и создает новую задачу Gulp, называемую javascript-ext , расширяя базовый javascript One. Вы можете переопределить любой из параметров задачи по умолчанию при расширении задачи.

Ключ объекта tasks определяет имя задачи Gulp.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  paths : {
    src : 'path/to/src' ,
    build : 'path/to/build' ,
    dist : 'path/to/dist'
  } ,
  cache : true ,
  debug : true ,
  tasks : {
    'javascript' : {
      options : {
        bundler : 'webpack'
      }
    } ,
    'javascript-ext' : {
      extends : 'javascript' ,
      paths : {
        src : 'path/to/custom-src'
      }
    }
  }
} ) ; 

Написание задания

Задачи, присутствующие в счете, сделаны из двух компонентов: process и base . Все остальные параметры, такие как pattern , доступны в этих компонентах.

 const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  tasks : {
    'mytask' : {
      base : './bases/base' ,
      process : './tasks/mytask' ,
      pattern : '**/*.css' ,
      paths : {
        src : 'path/to/custom-src' ,
        build : 'path/to/custom-build' ,
        dist : 'path/to/custom-dist'
      }
    }
  }
} ) ;

Базовые задачи

base задача служит шаблоном для других задач. Это делает четыре конвейерных крючка: init , build , Dist и end для интеграции в него процесса. Если base задача отсутствует, то process рассматривается как автономная задача и не будет использовать шаблон.

 // bases/base.js

module . exports = ( $ , gulp , config , task ) => ( ) =>
  gulp . src ( $ . path . join ( config . task . src || config . paths . src , task . pattern ) )
    . pipe ( task . process . init ( ) )     // Initialization hook
    . pipe ( $ . debug ( ) )
    . pipe ( task . process . build ( ) )    // Building hook
    . pipe ( gulp . dest ( config . task . build || config . paths . build ) )
    . pipe ( task . process . dist ( ) )     // Distribution hook
    . pipe ( gulp . dest ( config . task . dist || config . paths . dist ) )
    . pipe ( task . process . end ( ) ) ;     // Ending hook

Пакет Sulp Setup предоставляет вам следующие готовые основания: gulp-setup/bases/base , gulp-setup/bases/compile и gulp-setup/bases/lint . Вы можете использовать эти базы для ваших пользовательских процессов.

Процесс задач

Задача процесса - это основная обработка, с которой занимается задача. Задачи процесса обычно используют шаблон , base задачу, с которой они интегрируют, предоставляя крючок init , build , dist или end . В качестве альтернативы, вы можете написать процесс как отдельную задачу глотка.

Шаблон

 // tasks/mytask.js

module . exports = ( $ , gulp , config , task ) => ( {
  build : $ . lazypipe ( )
    . pipe ( $ . autoprefixer ) ,
  dist : $ . lazypipe ( )
    . pipe ( $ . cssmin )
} ) ;

Автономный

 // tasks/myclean.js

module . exports = ( $ , gulp , config , task ) => {
  return ( ) => gulp . src ( [ config . paths . build , config . paths . dist ] )
    . pipe ( $ . clean ( ) ) ;
} 

Взносы, ошибки и запросы функций

Есть ошибка или запрос на функцию? Пожалуйста, сначала прочитайте руководящие принципы проблемы и найдите существующие и закрытые проблемы. Если ваша проблема или идея еще не решены, откройте новую проблему.