Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #g
  • #gu
  • #gul
RSS: #gulp

#gulp

  • #gulp-tasks-for-css
  • @cy_altern
    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 @cy_altern CC BY-SA 15/11/2019
    3
    @spip
    @jeanmarie
    @touti
    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 @jeanmarie CC BY-NC-SA 18/11/2019
      @seenthis

      @seenthis je crois que nous avons un spammeur : @devytheja

      jeanmarie @jeanmarie CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/11/2019
      @seenthis

      @seenthis ça serait pas « un peu » du spam ça ?

      b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/11/2019
      @jeanmarie @seenthis

      @jeanmarie @seenthis on est d’accord, je supprime le compte tout de suite.

      b_b @b_b PUBLIC DOMAIN
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 18/11/2019
      @seenthis

      @seenthis : Les commentaires se retrouvent sur un billet de cy_altern.

      BigGrizzly @biggrizzly CC BY-NC-SA
    Écrire un commentaire
  • @cy_altern
    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 @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 @cy_altern CC BY-SA 9/05/2019
    1
    @tofulm
    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 @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 @cy_altern CC BY-SA 4/10/2018
    1
    @jeanmarie
    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 @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
  • @hackernoon
    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 @cy_altern CC BY-SA 12/11/2017
    5
    @tofulm
    @bce_106_6
    @b_b
    @denisb
    @ze_dach
    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 @cy_altern CC BY-SA 26/10/2017
    2
    @rastapopoulos
    @mukt
    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 @rastapopoulos CC BY-NC 26/10/2017

      #intégration #web #javascript

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 10/08/2017
    1
    @tofulm
    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 @cy_altern CC BY-SA 7/08/2017
    2
    @tofulm
    @nicod_
    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 @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
  • @nhoizey
    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 @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
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 3/02/2016
      @rastapopoulos

      @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 @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
    • @nhoizey
      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 @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
    • @nhoizey
      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 @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
    • @nhoizey
      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 @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
    • @nhoizey
      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
  • @nhoizey
    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
  • @nhoizey
    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 @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 @baroug 10/03/2014
    7
    @fil
    @rastapopoulos
    @0gust1
    @7h36
    @02myseenthis01
    @severo
    7
    @fil

    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 @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 @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 @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 @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 @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 @robin CC BY 2/12/2013
    1
    @0gust1
    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 @0gust1 CC BY-NC 2/12/2013

      #javascript #pipes #streams #nodejs #grunt #gulp

      0gust1 @0gust1 CC BY-NC
    • @0gust1
      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

Thèmes liés

  • #javascript
  • #grunt
  • #optimisation
  • #image
  • #web_dev
  • #svg
  • #sprite
  • #node
  • company: github
  • #nodejs
  • #clevermarks
  • #qualité
  • #gulp
  • #compression
  • #css
  • #jpg
  • #png
  • #grunt