gulp setup

La configuration de gorgée parfaite

Ce projet vise à créer une configuration Gulp modulaire et configurable. Obtenez l'automatisation du projet opérationnel avec un minimum d'implication. Gulp-Settup est écrit et entretenu par @alexgrozav.

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

Exemple de gulpfile.js

La configuration de Gulp à l'aide de Gulp-Settup est plus simple que jamais.

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

Tâches par défaut

Par défaut, Gulp-Settup est livré avec une variété de tâches préfabriquées.

 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

gorgée

La tâche default exécutera une séquence de build , browser-sync et watch , comme vous le feriez habituellement dans Gulp.

Gulp Build

Par défaut, la tâche de construction exécutera la tâche clean , après quoi elle exécute toutes les autres tâches qui fournissent un paramètre pattern .

Gulp Clean

Cette tâche supprimera les dossiers de construction et de distrants existants.

Gulp Watch

La tâche watch surveillera les modifications et reconstruit toute tâche qui fournit un paramètre pattern . En plus de cela, gulp-setup crée un partials graph , qui reconstruia tout fichier qui dépend de celui qui a été changé.

gorgée

Cette tâche exécutera n'importe quelle tâche qui se termine par -lint .

Gulp html

Copie des fichiers .html dans le dossier Build, puis les divise et les publie dans DIST.

Gulp CSS

Autoprefixes .css les fichiers et les diffuse dans le dossier de construction, puis les divise et les publie dans DIST.

sass de gorgée

Compiles et Autoprefixes Files .sass et .scss et les diffuse dans le dossier Build, puis les divise et les publie dans DIST.

_{Cette tâche utilise le partials graph , ce qui signifie que toute modification d'un partiel déclenchera une reconstruction sur les fichiers parent.}

stylet gulp

Compiles et Autoprefixes .styl Files et les diffuse dans le dossier Build, puis les divise et les publie dans DIST. Stylus Instance offre également une fonctionnalité rucksack-css .

_{Cette tâche utilise le partials graph , ce qui signifie que toute modification d'un partiel déclenchera une reconstruction sur les fichiers parent.}

Gulp Javascript

Compile ES6 .js Files et les diffuse dans le dossier Build, puis les divise et les publie dans DIST. La tâche javascript peut utiliser webpack ou browserify pour traiter et regrouper les fichiers, spécifié à l'aide du paramètre options.bundler (comme le montre l'exemple de configuration ci-dessous).

_{Cette tâche utilise le partials graph , ce qui signifie que toute modification d'un partiel déclenchera une reconstruction sur les fichiers parent.}

Gulp CoffeeScript

Compiles .coffee Files et les diffuse dans le dossier Build, puis les divise et les publie dans DIST. Tout comme dans la tâche javascript , vous pouvez utiliser webpack ou browserify pour regrouper les fichiers.

_{Cette tâche utilise le partials graph , ce qui signifie que toute modification d'un partiel déclenchera une reconstruction sur les fichiers parent.}

gorgée

Compile .ts Les fichiers et les diffusent dans le dossier Build, puis les divifie et les publie dans DIST. Tout comme dans la tâche javascript , vous pouvez utiliser webpack ou browserify pour regrouper les fichiers.

_{Cette tâche utilise le partials graph , ce qui signifie que toute modification d'un partiel déclenchera une reconstruction sur les fichiers parent.}

images de gorgée

Optimise les fichiers .svg , .jpg , .png et .gif et les publie dans les dossiers de construction et de dist.

polices de gorgée

Copies .eot , .svg , .ttf , .woff et .woff2 fichiers aux dossiers de build et de dist.

Configuration

Voici un exemple de configuration pour Gulp-Settup qui définit les options de la tâche javascript par défaut existante, et crée une nouvelle tâche Gulp appelée javascript-ext en étendant le javascript de base. Vous pouvez remplacer l'un des paramètres de tâche par défaut lors de l'extension d'une tâche.

La clé d'objet tasks définit le nom de la tâche 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'
      }
    }
  }
} ) ; 

Écrire une tâche

Les tâches présentes dans la gorgée sont faites à partir de deux composantes: process et base . Tous les autres paramètres, tels que pattern , sont mis à disposition dans ces composants.

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

Tâches de base

La tâche base sert de modèle pour d'autres tâches. Il rend quatre crochets de pipeline disponibles: init , build , dist et end pour y intégrer un processus. Si la tâche base est manquante, le process est considéré comme une tâche autonome et n'utilisera pas de modèle.

 // 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

Le package Gulp-Settup vous fournit les bases préalables suivantes: gulp-setup/bases/base , gulp-setup/bases/compile et gulp-setup/bases/lint . Vous pouvez utiliser ces bases pour vos tâches de processus personnalisées.

Traiter les tâches

La tâche de processus est le principal traitement qui concerne la tâche. Les tâches de processus utilisent normalement un modèle , une tâche base avec laquelle ils s'intègrent en fournissant des crochets init , build , dist ou end . Alternativement, vous pouvez écrire le processus en tant que tâche autonome de Gulp.

Modèle

 // tasks/mytask.js

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

Autonome

 // tasks/myclean.js

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

Contributions, bogues et demandes de fonctionnalités

Vous avez un bug ou une demande de fonctionnalité? Veuillez d'abord lire les directives du problème et rechercher des problèmes existants et fermés. Si votre problème ou votre idée n'est pas encore résolu, veuillez ouvrir un nouveau problème.