GitHub - MathiasPaumgarten/grunt-bake: bakes parsed templates into files in order to ease the process of creating static pages. Configuring tasks - Grunt: The JavaScript Task Runner. This guide explains how to configure tasks for your project using a Gruntfile. If you don't know what a Gruntfile is, please read the Getting Started guide and check out a Sample Gruntfile. Grunt Configuration Task configuration is specified in your Gruntfile via the grunt.initConfig method. This configuration will mostly be under task-named properties, but may contain any arbitrary data. As long as properties don't conflict with properties your tasks require, they will be otherwise ignored. Also, because this is JavaScript, you're not limited to JSON; you may use any valid JavaScript here. Task Configuration and Targets When a task is run, Grunt looks for its configuration under a property of the same name. Specifying both a task and target like grunt concat:foo or grunt concat:bar will process just the specified target's configuration, while running grunt concat will iterate over all targets, processing each in turn.
Options The options object is optional and may be omitted if not needed. GitHub - andismith/grunt-responsive-images: Produce images at different sizes for responsive websites. GitHub - Pestov/essential-grunt-plugins: Living list of most useful plugins for Grunt. Browserify : Partager le code JavaScript entre front et back end. Exécuter du JavaScript aussi bien côté serveur que dans le navigateur de vos clients devient possible grâce à Browserify. Browserify : Qu'est-ce que c'est ? Il dors et déjà possible d'exécuter du JavaScript côté client et côté serveur sans utiliser Browserify.
Cependant, la grande entrave actuellement est le fait que les frameworks pour le front et le back end sont différents. Ainsi, l'exercice est assez périlleux car on est contraint d'utiliser du JavaScript assez rudimentaire. De plus, la question des dépendances de votre projet est difficile à résoudre car les systèmes de packets sont nombreux et aucun ne sort vraiment du lot côté front. Browserify résouds tous ces problèmes grâce à une technique radicale : porter la plupart des modules natifs de NodeJS sur le front. NPM dans le navigateur Il existe déjà un grand nombre de modules JavaScript compatibles avec Browserify publiés sur NPM.
Les cas d'utilisations mutualiser la validation de données côté client et côté serveur. How Browserify Works. Browserify is incredibly popular these days, and rightfully so. In this article we'll look at the basics of how it works. Browserify uses the term entry file(s) to describe where it will start reading a dependency graph, and its output is referred to as a bundle.
At its highest level, a Browserify bundle is simply an IIFE, or Immediately Invoked Function Expression. This is of course a simple mechanism to make code run as soon as it is loaded. The module map The first argument passed to the IIFE is a map, where the keys are unique numbers and the values are 2 element arrays. As you can see, each module has been assigned a unique number id. Let's look at the entry.js module. The array's second element is another map, but this time the map is of your module's dependencies. This is a greatly simplified example, but you can see how our dependency tree has been recreated in code. Generated closure require('. but our bundle represents it as function (require, module, exports) { require('. The cache. Drdk/grunt-dr-svg-sprites. Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch. The tough economic times on Tatooine hit everyone hard, including the Jawas. Delivering a fast experience on the web usually involves reducing server response time, minification of CSS/JS/HTML and an optimisation of images and above-the-fold content.
We can further minimize the latency caused by stylesheet loading by removing unused CSS rules delivered to the client. In this write-up, we’ll take a look at build tasks you can use to remove unused CSS in your pages. Before we begin, I thought it would be useful to share some success stories just to demonstrate that the tools here can be used to make a difference. Unused CSS is a particular problem when working with a heavy modern UI framework such as Twitter Bootstrap, Zurb Foundation or Adobe TopCoat.
In the below Bootstrap test, the results from running an audit of a project through the Chrome DevTools Audits panel indicates that ~ 90% of the CSS rules are unused. UnCSS Using grunt-uncss Testing As you can see, both sites look identical. Icagstrout/grunt-imagemagick. Grunt-cmd-transport. Jsoverson/grunt-preprocess. Allegro/grunt-maven-plugin. Grunt-contextualize. This plugin overrides configuration properties based on the current context, in order to re-use a single set of plugin targets for multiple contexts. This is particularly useful when a plugin is already configured with multiple targets -- for example, to create one JavaScript or CSS file for the whole site, and one for each set of pages on a complex site.
In these cases, creating and maintaining a distinct configuration for each combination of components (e.g. site-wide vs. home page) with build configurations (development vs. distribution) is burdensome. This plugin supports three modes (which can be mixed and matched): See the bottom of this README for examples of using each mode to modify SASS and Jade configurations. Alternatives: Grunt templates work great when the configuration property is a string. Getting Started This plugin requires Grunt ~0.4.x npm install grunt-contextualize --save-dev grunt.loadNpmTasks('grunt-contextualize'); The "contextualize" task Overview Contextual Properties. Cbas/grunt-rev. OutaTiME/grunt-replace. Jnordberg/wintersmith. J'ai essayé Bower, l’outil de gestion des dépendances front-end. Pourquoi ?
Le management de librairies externes a toujours été un casse-tête pour les développements front en javascript. Combien de fois sommes-nous allés sur le site de jQuery afin de récupérer la dernière version, de la remplacer dans notre dossier “/libs” et de faire la modification dans notre balise <script> ?. Quand on a une vingtaine de dépendances, le travail commence à devenir relativement… agaçant ; sans parler des risques de non compatibilité et la gestion des rollback. On a beau parfois râler sur maven, on ne peut nier que celui-ci soulage beaucoup les développeurs java dans sa gestion des dépendances. Node a apporté une première solution avec son npm (Node Packaged Modules), indispensable pour le développement d’applications en node.js. Celui-ci est malheureusement uniquement orienté “back” et le travail côté front reste toujours manuel. Puis bower s’est présenté à moi. Bower c’est quoi ? Bower c’est donc un outil de management de librairies pour le web.
Mise en pratique <! Yeoman/grunt-usemin. Grunt-processhtml. Process html files at build time to modify them depending on the release environment Getting Started This plugin requires Grunt ~0.4.1 If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command: npm install grunt-processhtml --save-dev Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript: grunt.loadNpmTasks('grunt-processhtml'); The "processhtml" task Process html files with special comments: <! Type This is required. Types: js, css, remove, template or include. or any html attribute if written like this: [href], [src], etc. target This is optional.
Is the target name of your grunt task, for example: dist. You can pass multiple comma-separated targets, e.g. <! Value Required for types: js, css, include and [attr]. Optional for types: remove, template. <! <! <! Options. Vladikoff/grunt-devtools. Grunt-beautify. Grunt-inline-content. Kswedberg/grunt-version. How to config grunt.js to minify files separately. Gruntjs/grunt-contrib-watch. Gruntjs/grunt-contrib-connect. Angular-phonecat-grunt/Gruntfile.js at master · gcoutant/angular-phonecat-grunt. Gérer vos RIA JavaScript avec Grunt.js. Aujourd’hui, de plus en plus d’applications web sont de véritables RIA (Rich Internet Application) écrites en JavaScript, utilisant des frameworks tels que Backbone.js ou AngularJS et interrogeant des web services REST+JSON. Ces applications sont constituées de simples fichiers statiques (HTML, CSS, JavaScript et images) qui sont la plupart du temps intégrés dans les projets Maven, packagés dans le WAR et déployés sur un Tomcat (enfin dans le meilleur des cas).
Cependant c’est loin d’être idéal. Tout d’abord l’application web et les web services devraient être séparés avec un côté client et un côté serveur : ils sont inter-dépendants mais ont leur propre cycle de développement. Jeune padawan : “Bon ok, j’ai mes web services dans un projet Maven, Play, Grails, ça je sais faire. Et pour mon client JavaScript, je fais quoi ? Je gère à la main ?”
Maitre Yoda : “Grunt.js tu utilisera !” Grunt.js va permettre d’automatiser toutes les tâches qu’on peut rencontrer sur ce genre de projet, à savoir : Configuring tasks. This guide explains how to configure tasks for your project using a Gruntfile. If you don't know what a Gruntfile is, please read the Getting Started guide and check out a Sample Gruntfile.
Grunt Configuration Task configuration is specified in your Gruntfile via the grunt.initConfig method. This configuration will mostly be under task-named properties, but may contain any arbitrary data. Also, because this is JavaScript, you're not limited to JSON; you may use any valid JavaScript here. Task Configuration and Targets When a task is run, Grunt looks for its configuration under a property of the same name. Specifying both a task and target like grunt concat:foo or grunt concat:bar will process just the specified target's configuration, while running grunt concat will iterate over all targets, processing each in turn. Options Inside a task configuration, an options property may be specified to override built-in defaults. The options object is optional and may be omitted if not needed. Files. Gruntjs/grunt-contrib-concat. Gruntjs/grunt-contrib-watch.
Gruntjs/grunt-contrib-uglify.