MENU
mars 7 2016

Utiliser Gulp en production Front-end (suite de Débuter avec Gulp)

Attention ! Cet article a plus de 1 an (2641 jours), ce qui signifie qu'il n'est pas forcément à jour !

Il existe une panoplie d’exemples de petites routines de Gulp, d’exemples de petits bouts de code, de façons de l’utiliser. Cependant, quand vient le temps d’avoir une bonne routine de travail, une manière de l’utiliser de façon continue dans tous nos projets, j’ai vu beaucoup moins d’exemples concrets. Alors je vais vous partager mon Gulp à moi, mon code que j’utilise en mode production chaque jour.

Ce qui va suivre est tout de même de niveau intermédiaire. Si, avec l’introduction je vous ai déjà perdu, si vous n’êtes pas à l’aise avec NodeJs, les NPMs, Bower, et si maintenant je vous ai perdu, alors je vous conseille de lire l’article Débuter avec Gulp.

1 - La structure (ou Scaffolding)

Tout d’abord, ma structure de dossiers est assez simple et similaire à bien d’autres qui existent. Il y a de meilleures structures que d’autres, certaines avec plus d’avantages que d’autres. À mon avis, ce qu’il faut, c’est être à l’aise avec et surtout, qu’elle permette de pouvoir travailler de manière modulaire. Le scaffolding permet de concevoir une structure solide pour le développement d’applications ou de sites web. Élaborer un scaffolding clair et efficace aide à comprendre facilement comment l’application fonctionne ainsi que de conserver un modèle MVC. Tenter de garder un même scaffolding au travers de tous les projets permet d’augmenter en efficacité et en rapidité le développement. Le scaffolding est étroitement lié au build system et à la gestion des ressources en dépendances.

    ├── assets_dev
    |  ├── css
    |  |  ├── components
    |  |  |  ├── _buttons.scss
    |  |  |  ├── _forms.scss
    |  |  |  ├── _fonts.scss
    |  |  ├── utilities
    |  |  |  ├── _mixins.scss
    |  |  |  ├── _variables.scss
    |  |  ├── layout
    |  |  |  ├── pages
    |  |  |  |  ├── _home.scss
    |  |  |  ├── _header.scss
    |  |  |  ├── _footer.scss
    |  |  |  ├── _general.scss
    |  |  ├── _bootstrap.scss
    |  |  ├── main.scss
    |  ├── img
    |  ├── fonts
    |  |  ├── list de fichier eot, woff, ttf
    |  ├── js
    |  |  ├── _other.js
    |  |  ├── main.js
    |  ├── vendor
    |  |  ├──bootstrap-sass-official
    |  |  ├──jquery
    |  |  ├──font-awesome
    ├── assets_dist
    |  ├── css
    |  |  ├── main.css
    |  |  ├── main.map.css
    |  ├── img
    |  |  ├── images compilées
    |  ├── fonts
    |  ├── js
    |  |  ├── main.js
    ├── gulpfile.js
    ├── config_gulp.js
    ├── package.json

Nomenclature du scaffolding

Le dossier racine pour le développement Front-End s’appelle assets_dev. Il contient tous les fichiers sources et devrait toujours rester en DEV. C’est dans ce seul dossier que l’on devrait travailler. Son pendant pour la production est assets_dist. Seul ce dossier devrait être transféré en production. À la racine réside le fichier package.json, le config_gulp.js, le fichier gulpfile.js ainsi que les composantes installées par le gulp.

Main.scss

Il contient les imports des CSS. (Nous allons le voir plus en détails plus tard.)

Layout

Le dossier layout des css possède les css de layout commun, tel que header et footer. Il possède aussi le dossier pages qui sert à conserver les scss spécifiques aux différentes pages.

Fichiers avec underscore

Les fichiers avec underscore sont par définition des fichiers qui sont importés dans un fichier parent. Ici, dans CSS, ils sont tous importés dans le main.scss. Dans le dossier JS, ceux avec underscore vont être "concatenés" pour former le main.js. Pour ceux qui n’ont pas de underscore, vous pourrez ainsi les ajouter dans le fichier de config_gulp en migration pour pouvoir les avoir dans votre dossier assets_dist. (Cette dernière composante est souvent pratique pour ajouter manuellement des fichiers JS dans une page, à un endroit différent du main.js et vendor.js. Ex.: modernizr.js ) La plupart des méthodes Gulp que j’ai vues n’avait pas ce fichier de config et jouait directement dans le fichier Gulpfile pour modifier leur fichier. Je voulais être modulaire et pouvoir réutiliser mon Front dans tout mes projets. Ce fichier est donc hyper pratique.

Vendor

Le dossier vendor contient toutes les librairies utilisées. C’est dans ce dossier qu’il y a, par exemple, bootstrap, bootstrap-sass, jquery, plugins, api-cri, etc. En fait ce dossier est généré par Bower.

Main.scss

Mon fichier main.scss n’est construit que d’une série d’imports. C’est donc assez simple par la suite de charger que les fichiers désirés. Voici un exemple : 

// Vendor
@import 'bootstrap';

// fonts
@import 'components/fonts';

// utilities
@import 'utilities/variables';
@import 'utilities/mixins';

// components
@import 'components/buttons';
@import 'components/forms';

// layout
@import 'layout/general';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/pages/home';

Sur la première ligne je charge Bootstrap, en fait je charge mon fichier bootstrap et non pas toute la librairie de bootstrap. Dans celui-ci je peux donc facilement, encore une fois, décider de ce que j’ai besoin pour le projet ou non. 

// Core variables and mixins
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";

// Reset and dependencies
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/normalize";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/print";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/glyphicons";

// Core CSS
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/scaffolding";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/type";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/code";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/grid";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/tables";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/forms";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/buttons";

// Components
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/component-animations";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/dropdowns";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/button-groups";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/input-groups";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/navs";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/navbar";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/breadcrumbs";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/pagination";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/pager";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/labels";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/badges";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/jumbotron";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/thumbnails";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/alerts";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/progress-bars";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/media";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/list-group";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/panels";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-embed";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/wells";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/close";

// Components w/ JavaScript
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/modals";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/tooltip";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/popovers";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/carousel";

// Utility classes
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/utilities";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-utilities";

Bower.json

Ce fichier sert à Bower et dicte les dépendances nécessaires pour le Front.

{
  "name": "gulp-bower-bootstrap-fontawesome",
  "version": "1.0.0",
  "authors": [
    "René Domingue"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap-sass-official": "~3.3.3",
    "fontawesome": "~4.4.0",
    "jquery": "1.11.2"
  }
}

Je l’ai gardé assez simple, je n’installe que Boostrat Sass, jquery et fontawesome pour débuter.

Package.json

Ce fichier est utilisé par Gulp, c’est ce fichier qui dit quels modules installer. Pour ma config j’utilise donc ces modules:

{
  "name": "rdsignTemplate",
  "version": "1.0.2",
  "description": "RDSign",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.8.6",
    "gulp-sass": "^2.0.3",
    "gulp-newer": "^0.5.0",
    "gulp-imagemin": "^2.2.1",
    "imagemin-pngquant": "^4.1.0",
    "gulp-util": "^3.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.5.2",
    "gulp-uglify": "^1.2.0",
    "gulp-minify-css": "^1.1.1",
    "gulp-bower": "0.0.10",
    "gulp-notify": "^2.2.0",
    "gulp-livereload": "^3.8.0",
    "gulp-connect": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "beepbeep": "^1.2.0",
    "gulp-autoprefixer": "^2.3.1",
    "browser-sync": "^2.11.1"
  }
}

Le fameux fichier config_gulp.js

Il est assez bien décrit par lui-même avec son fonctionnement.

// Fichiers d'extention multiple à copier {lien src : lien dist}
//  Mettre le SRC sans "./" comme suit :  "assets_dev/fonts/**/*" pour que le watch fonctionne dessus
// N.D.A : Le watch a un problème avec l'utilisation du "./".
// N.D.A 2 : Le watch ne peut s'effectuer sur la création d'un nouveau dossier.
var migrationConfig =  {
   "assets_dev/vendor/fontawesome/fonts/**/*" : "./assets_dist/fonts"
};

/* Fichiers JS de vendor à compresser dans le fichier assets_dist/js/vendor.js*/
var vendorConfig = [
    './assets_dev/vendor/jquery/dist/jquery.min.js',
    './assets_dev/vendor/bootstrap-sass-official/assets/javascripts/bootstrap.min.js'
];

// export it
exports.vendorConfig =vendorConfig;
exports.migrationConfig =migrationConfig;

C’est avec ce fichier que je vais construire avec le Gulp le fichier vendor.js. Pourquoi est-ce que je fais sa construction manuellement ? Parce que je veux garder un oeil sur ce qui va être chargé ainsi que l’ordre dans lequel ils vont être "concatené" plus tard.

Bon, après cette lecture vous pouvez prendre une pause, vous l’avez mérité.

Pour ne pas trop surcharger la page pour rien, j’ai mis la suite de cet article sur cette page Utiliser Gulp en production Front-end (suite)

Catégories :

HTML CSS Javascript