Informations sur les tâches gulp

Le fichier principal est gulpfile.js qui regroupe l'ensemble des différentes tâches gulp.

Le dossier src/gulp/ contient les différentes fonctions gulp (sass, webpack, favicon, ...).

Les tâches sont à adapter pour chaque projet en particulier pour le chemin des fichiers et dupliquer des tâches.

SASS

La tâche sass va créer un source map, compilé le sass en rajoutant les autoprefixer et cleaner et minifier le css final. Elle alerte s'il y a une erreur de syntaxe. Les fichiers finaux se retrouvent dans le dossier dist/css/ et nommer theme.min.css.

Ex: La tâche principale: gulp.task('sass', function (cb) { plugins.runSequence('sass:front', cb); });

La sous tâche appelle la fonction sass (src/gulp/sass.js): gulp.task('sass:front', require('./gulp/sass')(gulp, plugins, 'theme', '../dist/css', false));

Webpack

La tâche webpack va minifier et cleaner le js final. Elle alerte s'il y a une erreur de syntaxe. Le fichiers final se retrouve dans le dossier dist/js/ et nommer main.min.js.

Ex: La tâche principale: gulp.task('webpack', function (cb) { plugins.runSequence('webpack:main', cb); });

La sous tâche appelle la fonction webpack (src/gulp/wepack.js): gulp.task('webpack:main', require('./gulp/webpack')(gulp, plugins, 'main', '../dist/js'));

Icon Font

La tâche Icon Font génère une font d'icône à partir des svg placer dans le dossier src/fonts/iconfont/. Cette tâche va aussi créer un fichier sass: src/sass/components/_iconfont.scss.

SASS : pour récupérer l'icône dans un autre fichier sa utiliser la règle icon(nom_de_icon). Ex: .icon(kernix);

ATTENTION : les svg doient être exporter dans un format précis (voir http://fontastic.me/faq > Section 'Exporting a SVG file from Illustrator')

Typo Font

Au préalable installer : brew install fontforge

La tâche Typo Font va généré tous les formats de fonts compatibles dont le modèle doit se trouver src/fonts/main et le résultat se trouve dans dist/fonts/main. Renommer dist/fonts/main par dist/fonts/Nom_de_la_font.

Dans le fichier src/sass/components/_fonts.scss: Décommenter après (// Fonts (Typo)), l'une des tâches(à adapter aux différentes font-weight) Ex:.font-face('../fonts/Nom_de_la_font/', 'Nom_de_la_font', 'Regular', 400, 'normal');

Dans le fichier src/gulpfile.js: Décommenter la ligne gulp.task('font:typo', require('./gulp/fontTypo')(gulp, plugins));

Lancer la tâche font:typo de gulp.

Images

La tâche img va compressé les images du dossier src/img/data-img/ et le résultat se trouve dans le dossier dist/img/.

Favicon

La tâche favicon va générer l'ensemble des formats des favicons à partir du favicon modèles (src/img/favicon/favicon.png) qui doit faire au minimum 260x260. Les fichiers seront dans dist/img/favicons. Le code html sera dans index.php.

Dans gulpfile.js, décommenter

gulp.task('favicon:img', require('./gulp/favicons')(gulp, plugins)); gulp.task('favicon:code', require('./gulp/faviconsCode')(gulp, plugins));

Lancer la tâche, favion de gulp.

Copy des vendors

La tâche copie les vendors de src/node_modules/ qui ont été installés par yarn add .. (ex:yarn add bootstrap).

1. Rajouter dans le fichier src/gulp/copy-vendor.js les chemins des vendors installés pour que gulp puisse copier dans le dossier dist/vendor/.
2. Lancer la tâche et vérifier si les fichiers ont été copiés.

Watch

La tâche watch regarde s'il y a des modification sur les fichiers sass et js et alerte s'il y a une erreur.