#gulp

#gulp-tasks-for-css

cy_altern @cy_altern CC BY-SA 13/12/2021

gulp-sass - npm
▻https://www.npmjs.com/package/gulp-sass
Passage en version 5 de gulp-sass : modification de la syntaxe + migration du compilateur Sass de Node Sass à Dart Sass :
To use gulp-sass, you must install both gulp-sass itself and a Sass compiler. gulp-sass supports both Dart Sass and Node Sass, but Node Sass is deprecated. We recommend that you use Dart Sass for new projects, and migrate Node Sass projects to Dart Sass when possible.
Ce qui donne dans le gulpfile.js :
var sass = require('gulp-sass')(require('sass'));
#gulp #sass #web_dev #Dart_Sass #Node

cy_altern @cy_altern CC BY-SA

Écrire un commentaire
cy_altern @cy_altern CC BY-SA 15/11/2019

3

3

Trimage (lossless) image compressor
►https://trimage.org
En complément de ▻https://seenthis.net/messages/111251 une compilation d’outils d’optimisation du poids des images :
– GUI :
. Trimage sous Linux
. ImageOptim sous MacOS : ►http://imageoptim.com
. PNGGauntlet sous Windows : ▻https://pnggauntlet.com
– en ligne de commande :
. OptiPNG : ▻http://optipng.sourceforge.net et sa doc « A guide to PNG optimization » : ▻http://optipng.sourceforge.net/pngtech/optipng.html
. jpegoptim : ▻https://github.com/tjko/jpegoptim
– Gulp : gulp-imagemin ▻https://github.com/sindresorhus/gulp-imagemin et sa doc : ▻https://www.tutorialspoint.com/gulp/gulp_optimizing_images.htm
– SPIP : utilitaire spip-cli ►http://zone.spip.org/trac/spip-zone/changeset/94606 (avec une option de commande pour traiter l’ensemble d’un répertoire, par ex IMG)
#image #jpg #png #optimisation #web_dev #gulp #SPIP #spip-cli

cy_altern @cy_altern CC BY-SA
- jeanmarie @jeanmarie CC BY-NC-SA 18/11/2019
  
  @seenthis je crois que nous avons un spammeur : @devytheja
  
  jeanmarie @jeanmarie CC BY-NC-SA
- b_b @b_b PUBLIC DOMAIN 18/11/2019
  
  @seenthis ça serait pas « un peu » du spam ça ?
  
  b_b @b_b PUBLIC DOMAIN
- b_b @b_b PUBLIC DOMAIN 18/11/2019
  
  @jeanmarie @seenthis on est d’accord, je supprime le compte tout de suite.
  
  b_b @b_b PUBLIC DOMAIN
- BigGrizzly @biggrizzly CC BY-NC-SA 18/11/2019
  
  @seenthis : Les commentaires se retrouvent sur un billet de cy_altern.
  
  BigGrizzly @biggrizzly CC BY-NC-SA
Écrire un commentaire
cy_altern @cy_altern CC BY-SA 13/06/2019

sasstools/sass-lint : Pure Node.js Sass linting
▻https://github.com/sasstools/sass-lint
Un « linter » SASS/SCSS qui semble efficace et complet (fonctionne en gulp + webpack)
L’extension VScodium : ▻https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint
#linter #SCSS #SASS #gulp #outil #web_dev #vscodium

cy_altern @cy_altern CC BY-SA

Écrire un commentaire
cy_altern @cy_altern CC BY-SA 23/05/2019

jkphl/gulp-svg-sprite : SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours
►https://github.com/jkphl/gulp-svg-sprite
Un script Gulp pour faire les sprites SVG. La doc est un peu éparpillée :
La doc générale de l’outil node.js qui fait les sprite : ►https://github.com/jkphl/svg-sprite
La doc spécifique Gulp : ►https://github.com/jkphl/gulp-svg-sprite
Utilise SVGO : SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files, cf ▻https://github.com/svg/svgo
La doc pour configurer les options de SVGO avec le script de sprite : ▻https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#svg-transformations
Voir aussi :
– les plugins de SVGO : ▻https://github.com/svg/svgo#built-in-plugins
– la version Gulp de SVGO : ▻https://github.com/ben-eb/gulp-svgmin
– une interface graphique pour SVGO : ►https://jakearchibald.github.io/svgomg
#SVG #gulp #sprite #SVGO #optimisation

cy_altern @cy_altern CC BY-SA

Écrire un commentaire
cy_altern @cy_altern CC BY-SA 9/05/2019

1

1

twolfson/gulp.spritesmith : Convert a set of images into a spritesheet and CSS variables via gulp
▻https://github.com/twolfson/gulp.spritesmith
Module Gulp générateur de sprites pour des images bitmaps (png/jpg).
Crée le fichier de sprite + le fichier css avec les classes qui vont bien.
Installation basique :
npm i gulp gulp.spritesmith --save

Exemple de fichier gulpfile.js minimum :
var gulp = require('gulp'), spritesmith = require('gulp.spritesmith') gulp.task('sprite', function () { var spriteData = gulp.src('img_entree/*.png') .pipe(spritesmith({ /* this whole image path is used in css background declarations */ imgName: 'img/sprite.png', cssName: 'css/sprite.css' })); return spriteData.pipe(gulp.dest('./')); });
#sprite #gulp #css

cy_altern @cy_altern CC BY-SA

Écrire un commentaire
cy_altern @cy_altern CC BY-SA 9/05/2019

Can’t find Python executable «python» after installing · Issue #56 · felixrieseberg/windows-build-tools
▻https://github.com/felixrieseberg/windows-build-tools/issues/56#issuecomment-308739624
Sous Windows ajouter Python à node.js via le paquet windows-build-tools
#node.js #windows #npm #python #gulp
- #Python
cy_altern @cy_altern CC BY-SA
Écrire un commentaire
cy_altern @cy_altern CC BY-SA 4/10/2018

1

1

Votre première PWA | Blog Eleven Labs
▻https://blog.eleven-labs.com/fr/votre-premiere-pwa
Tutoriel pour réaliser une Progressive Web App (avec en particulier utilisation de Gulp pour la configuration du service worker)
#PWA #progressive_web_app #gulp #service_worker
- #Blog Eleven Labs
cy_altern @cy_altern CC BY-SA
- cy_altern @cy_altern CC BY-SA 14/11/2018
  
  semble t’il que les service worker ne soient pas encore d’une simplicité et fiabilité éprouvée... : ▻https://www.construct.net/fr/blogs/ashleys-blog-2/service-workers-are-a-pain-in-the-ass-934
  
  cy_altern @cy_altern CC BY-SA
Écrire un commentaire
Hacker Noon @hackernoon CC BY-SA 24/04/2018

#gulp tasks for #css
▻https://hackernoon.com/starter-project-9961ecf28a41?source=rss----3a8144eabfe3---4
https://cdn-images-1.medium.com/max/960/1*j_9iPQ7KcpU_fr43q1qLIQ.png
This article is part of a series about Starter Project, and this time I will explain all about Gulp tasks for CSS.SettingsThe idea of Starter Project is to have a single config file for all Gulp tasks. If you open config.json file, you could see a section for CSS.The first option is run. If set to true, CSS Gulp tasks will be executed. There are three other mandatory options for CSS:src - a path to a folder with Sass files,dest - a path to a folder where compiled CSS files will be saved, andclean - a path to a folder which will be cleaned before Gulp execution (almost always the same as dest option).All paths are prepended with global root path.Other options are for gulp-cssimport, gulp-autoprefixer, gulp-rename, and gulp-sourcemaps.SassStarter Project uses Sass as a preprocessor for CSS. As (...)
#javascript #starter-project #gulp-tasks-for-css

Hacker Noon @hackernoon CC BY-SA

Écrire un commentaire
cy_altern @cy_altern CC BY-SA 12/11/2017

5

5

Essential Image Optimization
►https://images.guide
We should all be automating our image compression.
Méthodes pour l’optimisation automatique des images d’un site web. Traite des nombreux nouveaux formats de compression : MozJPEG, Guetzli, WebP...
#image #compression #optimisation #jpg #png #svg #qualité #gulp

cy_altern @cy_altern CC BY-SA

Écrire un commentaire
cy_altern @cy_altern CC BY-SA 26/10/2017

2

2

Gulp pour les débutants
▻https://la-cascade.io/gulp-pour-les-debutants
#gulp #node #tutoriel

cy_altern @cy_altern CC BY-SA
- RastaPopoulos @rastapopoulos CC BY-NC 26/10/2017
  
  #intégration #web #javascript
  
  RastaPopoulos @rastapopoulos CC BY-NC
Écrire un commentaire
cy_altern @cy_altern CC BY-SA 10/08/2017

1

1

GitHub - imagemin/imagemin : Tense, nervous, minifying images ?
▻https://github.com/imagemin/imagemin
Utilitaire pour compresser les images web (jpg, png, gif) et les fichiers SVG. Disponible en ligne de commande, GUI, module Gulp
#image #gulp #node #compression #optimisation #webdev

cy_altern @cy_altern CC BY-SA

Écrire un commentaire
cy_altern @cy_altern CC BY-SA 7/08/2017

2

2

GitHub - jkphl/svg-sprite: SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)
►https://github.com/jkphl/svg-sprite
Module node.js pour génération automatisée de sprites SVG.
#SVG #sprite #node #gulp

cy_altern @cy_altern CC BY-SA

Écrire un commentaire
cy_altern @cy_altern CC BY-SA 16/03/2016

#gulp all the things
▻https://github.com/stephanie-walter/sw-gulp-static-starter
Un exemple d’utilisation de gulp pour générer un site #statique avec css et js compressés. Cf ▻https://drive.google.com/file/d/0B3ugutE8EdWaUUdmLS1qWjRMeVE/view?pref=2&pli=1 pour la doc
#howto #starter

cy_altern @cy_altern CC BY-SA

Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016

» Case Study : Our #SVG Icon Process Cloud Four Blog
▻http://blog.cloudfour.com/our-svg-icon-process
SVG’s versatility empowers us to craft the most appropriate solution for our audience and use-case. So as much as I’d like to, I can’t say exactly how you should implement SVG icons in your next project. There’s no substitution for research and tryi… Tags: #processus #picto #grunt #gulp SVG #clevermarks

Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016
  
  En lien avec, puisque ce sont les mêmes :
  ►http://seenthis.net/messages/433569
  Mais je persiste : je ne trouve pas ça bien d’avoir à insérer des images (SVG ou pas peu importe) de décoration, dans le HTML. Pour moi c’est typiquement un truc uniquement propre au thème graphique du moment, et qui doit pouvoir être changé juste en changeant les choix graphiques, sans toucher aux templates.
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016
  
  @rastapopoulos si tu les gères à l’extérieur et que c’est juste ton processus de packaging/déploiement qui les met dans le HTML, ça ne te suffit pas ? ;-)
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016
  
  oui ça c’est encore autre chose… avec un post-processeur ?
  Du coup qu’appelles-tu les gérer à l’extérieur ? Dans ton HTML tu as par exemple des classes CSS classiques, par exemple class="bouton precedent", et ensuite comme tu dis que sur cet élément tu veux le décorer avec un pictogramme SVG ?
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016
  
  Oui, par exemple, et du coup une tâche (npm, Grunt, Gulp, whatever) prend le HTML, injecte le sprite SVG au début, puis des <use> aux bons endroits.
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016
  
  Oui, je comprends bien le principe du post-processing, ya pas de problèmes… mais ma question c’était plus, comme tu gères concrètement le fait de dire que tu veux tel pictogramme de décoration devant le texte de tel bouton ayant telle classe ? Où et comment tu décris ça ? C’est un peu une réinvention du CSS quoi ?… :D
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016
  
  Ah mais on ne s’est pas compris, comme eux je dis que "because our icons represent or reinforce content, they should exist in markup", donc ce n’est pas (complètement) de la décoration, donc pas du ressort de CSS.
  Si tu regardes le source de ►http://play.esviji.com tu verras au tout début du <body> un sprite SVG qui contient des boutons que j’utilise après dans l’interface. Pour l’instant le sprite est en dur dans le HTML initial, mais j’ai prévu de l’externaliser dans les sources, pour qu’il ne soit inclus qu’à la « compilation ».
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016
  
  Ah oui mais moi je dis clairement l’inverse, que « une flèche vers la gauche », c’est une décoration pour un bouton « précédent ».
  Une loupe c’est une décoration pour un bouton « rechercher ».
  Etc etc. Donc ce n’est pas du tout du contenu (pour moi).
  (Et une icône toute seule sans aucun label, c’est quasiment à coup sûr très mal.)
  Après si le post-proc sert « juste » à dire qu’on transforme le span class « icone loupe » en lui assignant un SVG de loupe, évidemment là le truc est déjà dans les balises. Bon au moins ça permet de changer l’icône si le thème graphique change, sans toucher aux balises.
  Mais pour moi c’est le fait même de dire d’aller chercher une icône de « flèche vers la droite » qui ne fait pas partie du contenu (et qui peut très bien changer).
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 4/02/2016
  
  Je comprends ta réticence de puriste, on pourrait continuer sans fin… ;-)
  Une icône toute seule sans aucun label, c’est parfois nécessaire, et avec le SVG inline, ça peut être complètement accessible.
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- RastaPopoulos @rastapopoulos CC BY-NC 4/02/2016
  
  Hihi oui je sais. :D
  Pour l’accessibilité, oui et non : pour moi l’accessibilité ce n’est pas QUE une histoire de lecteur d’écran (et là oui on peut lui faire lire un label, etc). Même si t’as des yeux, une icône toute seule, il y a un grand nombre de cas où le sens n’est potentiellement pas immédiat à beaucoup trop de monde, car il n’y a pas de standard. Ça fait trop d’apprentissage, trop lent, et donc ce n’est bon ni pour les gens qui ont un handicap de compréhension (il y a des handicaps cognitifs), ni pour l’optimisation des « conversions » dans un contexte marketing.
  Les tests A/B sur hamburger seul VS mot « menu » le montrent assez bien. Et « Try Icon Labels instead of opening for interpretation. »
  ▻http://goodui.org/index.html#47
  
  RastaPopoulos @rastapopoulos CC BY-NC
- Nicolas Hoizey @nhoizey CC BY-NC-SA 4/02/2016
  
  Je connais bien le problème du hamburger comme seule représentation du menu, effectivement. Nous sommes d’accord que c’est de l’accessibilité au sens cognitif, mais donc plus largement de l’UX pour tout le monde.
  Mais imagine mettre des labels sur tous les boutons d’un WYSIWYG par exemple… :-p
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 20/01/2016

MicrosoftDX/grunt-webstandards · GitHub
▻https://github.com/MicrosoftDX/grunt-webstandards
"grunt-webstandards is a #Grunt plugin that improves your site with modern web standards. It checks if your website is using correct CSS prefixes, using up to date JavaScript libraries, using responsive web design, if you’re defining platform icons, … Tags: Grunt #Gulp qualité #clevermarks #VorlonJS
#qualité
- #Github
Nicolas Hoizey @nhoizey CC BY-NC-SA
Écrire un commentaire
Nicolas Hoizey @nhoizey CC BY-NC-SA 8/06/2015

addyosmani/critical · GitHub
▻https://github.com/addyosmani/critical
Tags : #webperf #critique #CSS #Gulp #Grunt #abovethefold

Nicolas Hoizey @nhoizey CC BY-NC-SA

Écrire un commentaire
0gust1 @0gust1 CC BY-NC 24/04/2014

Une interface graphique pour #gulp !
▻http://gulpfiction.divshot.io/#/3401b837-93e9-4488-8392-67f53f567023
▻https://github.com/GulpFiction/gulpfiction
#javascript #développement

0gust1 @0gust1 CC BY-NC

Écrire un commentaire
baroug @baroug 10/03/2014

7

7

Metalsmith
▻http://www.metalsmith.io
All of the logic in Metalsmith is handled by #plugins. You simply chain them together. (…) Each plugin is invoked with the contents of the source directory, with every file parsed for optional #YAML front-matter
@fil
- #You
baroug @baroug
- RastaPopoulos @rastapopoulos CC BY-NC 10/03/2014
  
  Bientôt il y aura autant de générateur de sites statiques que de développeur⋅euse⋅s web. :)
  Mais sinon ça a l’air cool quand tout est développé en plugins dès le départ comme ça.
  
  RastaPopoulos @rastapopoulos CC BY-NC
- 0gust1 @0gust1 CC BY-NC 10/03/2014
  
  Bientôt il y aura autant de générateur de sites statiques que de développeur⋅euse⋅s web. :)
  C’est comme les outils de build basés sur node.js. ^^
  Sinon, c’est vrai qu’il a l’air sympa à première vue, j’ai pas eu le temps de bcp regarder.
  
  0gust1 @0gust1 CC BY-NC
- 0gust1 @0gust1 CC BY-NC 15/04/2014
  
  Hey, j’ai mis les mains dedans. C’est plutôt très sympa.
  On retrouve le même principe de fonctionnement que #wintersmith et une syntaxe proche de #gulp.
  A la différence de #grunt / #gulp, ce n’est pas un moteur de tâches qui peut servir à faire de la génération de sites statiques, mais l’inverse.
  On a donc plein de truc très utiles pour faire des sites web (gestion de permalinks, des titres, des collections de posts...), qui sont pénibles à refaire en grunt/gulp.
  Et par rapport à wintersmith, c’est plus clair, plus facilement hackable (et sans #coffeescript).
  J’ai même réussi à faire implémenter une fonctionnalité de livereload en 1 soirée (j’espère que l’auteur metalsmith-watch prendra en compte ma demande d’évo ^^).
  Bref, je me demande si #wintersmith n’a pas du souci à se faire, chez moi.
  
  0gust1 @0gust1 CC BY-NC
Écrire un commentaire
0gust1 @0gust1 CC BY-NC 17/02/2014

YANBT — yet another nodeJS build tool :
▻http://www.solitr.com/blog/2014/02/broccoli-first-release/index.html
Après #grunt, après #gulp, voici #broccoli.
http://www.bearsupply.net/wp-content/uploads/2012/04/Broccoli-Bunch.jpg
Il a des arguments, quand même, mais c’est fatiguant.
#javascript #nodejs #build-tool

0gust1 @0gust1 CC BY-NC

Écrire un commentaire
0gust1 @0gust1 CC BY-NC 26/12/2013

►http://www.insertafter.com/articles-gulp_vs_grunt.html
#gulp sera-t-il le successeur de #grunt ?
Analyse des avantages de Gulp par rapport à Grunt, par nicolas froidure (@nfroidure)
#javascript #task-runner
.

0gust1 @0gust1 CC BY-NC

Écrire un commentaire
robin @robin CC BY 2/12/2013

1

1

wearefractal/gulp
▻https://github.com/wearefractal/gulp
The streaming build system
This looks indeed to be a lot more understandable than the rather intricate Grunt.

robin @robin CC BY
- 0gust1 @0gust1 CC BY-NC 2/12/2013
  
  #javascript #pipes #streams #nodejs #grunt #gulp
  
  0gust1 @0gust1 CC BY-NC
- 0gust1 @0gust1 CC BY-NC 26/12/2013
  
  gulp ou grunt ? : ►http://www.insertafter.com/articles-gulp_vs_grunt.html
  
  0gust1 @0gust1 CC BY-NC
Écrire un commentaire