gulp plate Télécharger - gulp plate Téléchargement du code source

gulp plate

Autres catégories

1.0.0

Télécharger

Assiette à gorgée

Gulp passe-partout et système de construction.

Comprend les outils, tâches et flux de travail suivants :

Webpack en tant que bundler de modules JavaScript
webpack-dev-middleware pour le rechargement en direct (compilation en mémoire pour des reconstructions plus rapides lors du développement)
Syntaxe ES2015 transpilée avec Babel
ESLint pour le peluchage JavaScript
Plus joli pour le formatage du code JavaScript
SASS compilé avec libsass, cartes sources, préfixe automatique et linting Sass
BrowserSync pour le rechargement en direct et le serveur statique
svgo pour la compression SVG.
gulp-svg-symbols pour générer un sprite d'icône SVG avec les balises <symbol> et <use>

Vous recherchez la version SilverStripe ? Regardez ici.

Dépendances / Installation

Gulp-plate dépend des technologies suivantes :

node.js comme environnement hôte local pour gulp (v. 7.5.0 ou supérieur) [1]
gulp en tant que gestionnaire de tâches
fil en tant que gestionnaire de dépendances

[1] Il est recommandé d'installer le nœud via nvm (Node Version Manager).

Pour commencer :

$ git clone https://github.com/arillo/gulp-plate myProject
$ cd myProject
$ rm -r .git    # Remove the link to the git repo
$ yarn          # Install dependencies

Commandes

 # Equivalent
$ yarn run build

Exécutez la tâche par défaut et générez une version de développement du site dans le dossier dist .

 # Equivalent
$ yarn start
$ yarn run watch

Exécutez la tâche par défaut une fois, démarrez un serveur et surveillez les modifications de fichiers.

 # Equivalent
$ yarn run prod

Définissez NODE_ENV='production' et générez une version de production du site en compressant js, css et html. C'est le dossier qui doit aller sur le serveur.

Si vous souhaitez exécuter une autre tâche gulp, ajoutez simplement le nom de la tâche à la commande build /gulp :

 # Equivalent
$ yarn run build sprite
$ yarn run b sprite
$ yarn run gulp sprite
$ yarn run g sprite

Important:

Le répertoire dist sera supprimé à chaque fois que vous exécuterez build/watch/prod. N'apportez aucune modification au répertoire dist .

Structure des dossiers

myProject/
  gulpfile.js/  # gulp tasks
  src/
    icons/      # SVG files to be included in he the sprite
    images/     # other images
    js/         # js code
    sass/       # Sass code, SCSS and Sass indented syntax possible
    html/       # html templates
      data/     # data in json format
      layouts/  # reusable layout templates
      macros/   # Nunjucks macros
      shared/   # reusable snippets

Configuration

Tous les chemins et paramètres du plugin ont été résumés dans un fichier centralisé : ./gulpfile.js/config.js . Adaptez les parcours et les décors à la structure et aux besoins de votre projet.

Configuration des Sprites SVG

Le sprite crée une image avec le nom sprite.svg dans ./dist/images/ . Il crée également un fichier Sass nommé : _sprite.scss dans ./src/sass/base/ .

Les fichiers Sass générés contiennent des informations utiles sur les icônes de sprite comme les dimensions de chaque icône. Le fichier changera chaque fois qu'une icône est ajoutée, supprimée ou modifiée, ne le modifiez pas manuellement. Vous pouvez modifier le fichier en modifiant le modèle dans ./gulpfile.js/tpl/_sprite.scss .

Actifs statiques

Pour déplacer les actifs statiques du répertoire source sans transformations, par exemple les fichiers de polices. Ajoutez les chemins src et dest au tableau static dans le config.js

Modèles HTML

Les modèles utilisent Nunjucks. Consultez la documentation pour plus d’informations sur la façon de les utiliser.

Toupet

La syntaxe Sass indentée est utilisée par défaut. Les fichiers Sass principaux doivent avoir une extension .sass , sinon le compilateur échoue. Les partiels peuvent être à la fois .sass et .scss .

Inclure les fichiers CSS de fournisseurs externes

Pour inclure des styles tiers dans votre CSS, incluez-les dans le fichier main.sass :

 // main.sass

@import url( ' ../../node_modules/normalize.css/normalize.css ' ) ;

Un plugin postcss intégrera ensuite les fichiers en préservant les cartes sources. Après la compilation Sass.

Attention, Sass déplacera les instructions @import url(...) en haut du fichier CSS généré, donc indépendamment du lieu d'inclusion, ces styles seront toujours inclus en haut du fichier.

Erreurs Sass-Lint

Au moment de la rédaction de cet article sass-lint échoue lorsqu'il rencontre des sélecteurs vides. C'est un bug, il peut être évité en ajoutant un commentaire indenté // après le sélecteur vide :

 .mySelector
  //

.mySelector_child
  text-align : center

Javascript

Le fichier ./gulpfile.js/config.js contient la configuration complète du webpack (voir la variable js ). N'hésitez pas à modifier si nécessaire. Gardez à l'esprit que le babel-loader doit toujours être présent car eslint s'appuiera sur lui.

La configuration sera légèrement modifiée en fonction de la tâche que vous exécutez. Lors de l'utilisation de la tâche de surveillance, la compilation Javascript se fera en mémoire, donc aucun fichier n'est écrit sur le disque ( ./dist/js/ sera vide) et webpack-hot-middleware/client sera injecté dans tous les bundles pour que le rechargement en direct fonctionne . Lors de la construction pour la production, webpack.optimize.UglifyJsPlugin est utilisé pour la minification. Jetez un œil à ./gulpfile.js/util/getWebpackConfig.js pour voir exactement ce qui se passe et modifiez-le si nécessaire.

Voici quelques recettes utiles pour vous aider à démarrer :

Déclarer des alias pour les fichiers fréquemment requis

 // gulpfile.js/config.js

const js = {
  resolve : {
    extensions : [ '.js' ] ,
    alias : {
      // Path relative to `context`
      myModule : './myModule/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/some-file.js

import myModule from 'myModule' ;

myModule ( ) ;

Documentation : https://webpack.js.org/configuration/resolve/#resolve-alias

Calage des modules non CommonJs

plugin jQuery

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  plugins : [
    // Make jQuery global, expected by the plugin.
    new webpack . ProvidePlugin ( {
      'window.jQuery' : 'jquery' ,
    } ) ,
  ] ,
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import 'myModule' ;

$ ( '.js-selector' ) . myModule ( ) ;

Module JavaScript régulier

 // gulpfile.js/config.js

const js = {
  //...
  resolve : {
    // Add extensions to prevent linting errors.
    extensions : [ '.js' , '.json' ] ,
    // Path from `node_modules`, where `myModule` is the module name.
    alias : {
      myModule : 'myModule/dist/myModule.js' ,
    } ,
  } ,
  module : {
    rules : [
      // ...
      {
        include : require . resolve ( 'myModule/dist/myModule.js' ) ,
        loader : 'exports-loader?MyModule' ,
      } ,
    ] ,
  } ,
} ;

 // src/js/main.js

import $ from 'jquery' ;
import MyModule from 'myModule' ;

const myInstance = new MyModule ( ) ;

Documents : https://webpack.js.org/guides/shimming/

Plusieurs bundles JavaScript et partage de code fournisseur

Pour créer plusieurs bundles, ajoutez des entiers à entry

 // gulpfile.js/config.js

const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
  } ,
  // ...
} ;

Cela générera deux bundles : main.js & other.js .

Si vous faites cela, c'est probablement une bonne idée de générer un autre bundle contenant tout le code du fournisseur partagé :

 // gulpfile.js/config.js

const webpack = require ( 'webpack' ) ;
//...
const js = {
  // ...
  entry : {
    main : [ './main.js' ] ,
    other : [ './someFile.js' , './sotherOtherFile.js' ] ,
    // List vendor modules here:
    vendor : [ 'jquery' , 'svg4everybody' ] ,
  } ,
  // ...
  plugins : [
    new webpack . optimize . CommonsChunkPlugin ( {
      name : 'vendor' , // Specify the common bundle's name
    } ) ,
  ] ,
  // ...
} ;