background preloader

Brunch - ultra-fast HTML5 build tool

Brunch - ultra-fast HTML5 build tool
Related:  Outils utiles

Pourquoi je préfère Brunch Ah, vous croyez que vous êtes au top parce que vous utilisez Grunt, Gulp, Broccoli ou même Glou ? Eh ben non, pas forcément, voire carrément pas. Du tout. Voilà déjà 4 ans que Brunch existe, et sur bien des scenarii courants, il bat tout ce petit monde à plate couture. Envie d’en savoir plus, et de voir plein d’exemples ? C’est par ici. UPDATE: This article has been translated to English and adapted to become the official Brunch Guide (EN/FR). Brunch ?! Brunch est un builder. Ce type de besoin est extrêmement fréquent chez les devs front et les designers front, qui ont souvent besoin de faire un peu les mêmes choses : partir d’une arborescence de fichiers LESS ou SASS pour produire un ou plusieurs CSS minifiés, pareil pour du JS, des images et leurs sprites, etc. Brunch face aux autres L’immense majorité des personnes qui automatisent ce type de tâches utilisent soit Grunt, soit Gulp (et parfois Broccoli ou Glou). Exécuteurs de tâches vs. outils de build Brunch est un outil de build. Watcher

Brunch, un workflow front-end simplifié Il y quelques temps, j’ai découvert Brunch, une alternative à Grunt. Et je dois le dire, j’ai été surpris de comprendre quasiment instantanément le principe de fonctionnement, là où je voyais des fichiers de configuration Grunt de 3 kilomètres de long (environ 1.86 miles pour les anglophones qui passeraient par là). Et surtout, une rapidité d'exécution inégalée. Mais c’est quoi au fait? Si vous êtes débutant, vous vous demandez sûrement ce que c’est que Brunch, Grunt ou encore Gulp. Ces outils sont des task runner, des processus d’automatisation de tâches répétitives sur les fichiers composants un site web: compilation des scripts et des styles (préprocesseurs)concaténation et minificationgénération de source-mapsoptimisation des imageset beaucoup d’autres tâches, de la plus simple à la plus avancée Après le travail de ces outils, vous aurez donc vos fichiers en double: Cela signifie que c’est le dossier contenant les fichiers finaux qui devient la racine de votre site. Aucune contrainte.

sindresorhus/gulp-rev Brackets HTML Wrapper extension Whats New 1.0 Check out the newest crafted features. Added advanced options. Installation Install it directly from the Brackets.io editor or do it manually. Extension Manager Run BracketsSelect _File > Extension Manager...Search for “HTML Wrapper” extension and click “Install” button Manual instalation Under main menu select Help > Show Extensions FolderGit clone this repository inside the "user" folderRestart Brackets How to use Select a list of items encapsulated by the desired parent tag and run the command. Select a clean list of items separated by a carriage returnRight click on the selection and click on the "HTML Wrapper" optionOr use the shortcut CMD/CTRL+SHIFT+E

Gagnez en productivité dans vos projets Javascript avec Brunch.io - Apprendre le Javascript Si vous bossez dans le domaine du développement web, vous avez certainement entendu parlé de grunt, vous savez, le truc qu’on utilise durant le développement pour effectuer des taches comme : Minification de codeRafraîchissement automatique de la pageconversion du code LESS ou SASS en CSS… après pour configurer grunt c’est souvent 4 kilomètres de lignes de code pour faire ce qu’on veux. Cependant à ma grande surprise, il existe une alternative au nom de Brunch, c’est plus ancien que la concurrence ( 5 ans déjà ), plus performant, et surtout beaucoup plus facile à prendre en main. Besoin d’une preuve ? et comme si ça ne suffisait pas, tout le processus de build s’effectue en général en moins de 200 ms, (c’est à dire que le temps que vous basculiez sur votre navigateur pour voir le résultat votre code est déjà mis à jour. Je vous invite à regarder la vidéo de christophe porteneuve qui explique tout cela très bien: Prérequis Brunch: Bower: Structure du projet les dossiers qu’on va utiliser:

smysnk/gulp-rev-all Swiffy  |  Google Developers As part of our transition of display ads to HTML5. the Swiffy Flash conversion tool is no longer available. We will continue to serve the Swiffy runtimes, so any files you have already converted will continue to play. Today more consumers are using the web in HTML5 compatible environments than Flash-compatible environments. In order to reach as large an audience as possible, we encourage everyone to transition to HTML5 authoring. Developers who currently create Flash SWF files have several ways to switch to HTML5 including Adobe Animate and Google Web Designer.

Server-side assets: File revisioning Asset managment is mostly associated with client-side resources, like stylesheets, scripts, graphics and the like. But if you have a decent build process to manage your assets, you might benefit from utilizing these assets also server-side. I’ve been doing this for some time on some of my projects, and have found at least two very promising use cases for this, one of which we’ll take a closer look at today. To keep stuff snappy on the net these days, the best way to go is usually to minimize the number of requests necessary to finish loading. This is easily said, but often a bit harder to implement. To keep requests to the minimum, you let the client cache static assets for months or longer, to avoid having to fetch them again. If you use tools like grunt or gulp, getting them to the filename rewriting is fairly trivial, thanks to plugins like grunt-filerev and gulp-rev. Let’s take a look at how to perform this, for Flask first, and then we’ll look at Django later. Flask location ~* \.(?

Related: