Grunt : introduction Qu'est-ce que Grunt ?

Slides:



Advertisements
Présentations similaires
The Microsoft ® Mouse Mischief add-in works with Microsoft ® PowerPoint ® 2010 or Microsoft ® Office PowerPoint ® Download and install the Mouse.
Advertisements

1.Est-ce que tu as un portable? __________________________________________________________ 2. Est-ce que tu as une voiture? __________________________________________________________.
Starter: Use your vocab sheets and resources in your book to continue this word-chain using French words.
Intégrer son site dans sa « Stratégie Facebook ».
2006/2007Denis Cabasson – Programmation Web Cours de programmation web ENSAE
Course Design Task Activité de conception de cours de formation.
Questions and ideas to use in your letter tonight.
Le corps Lundi onze janvier 2010 Objectifs: Can I name at least
Starter: Write – in English – what you have to bring to school everyday. Then write a list of everything you have to take with you when you go out with.
Configuration Android
TortoiseSVN N°. Subversion : pour quoi faire ? Avoir un espace de stockage commun – Tous les étudiants du SIGLIS ont un espace svn commun Partager vos.
Qu’est-ce qui te plaît? Chapitre 2.
Création d'un projet Web avec Netbeans
Vendredi, le 28 septembre. French 2 1. Turn in: late/absent APT 1,4,7 pages OR A BLANK PAGE IF NOT DONE! (PreAP: turn in B/W sentences for an 80!) 2.
1. Je mentends très bien avec _________. 2. Je me chamaille souvent avec ________. 3. Je me fâche avec _________. 4. Je me dit tout avec __________. 5.
Créer des packages.
SciTools Understand A Source Code Analysis and Metrics Tool
S'initier au HTML et aux feuilles de style CSS Cours 5.
Veille Technologique Miwako MARTIN
Formation ExtJS 1 Vendredi 21 aout 2009 – Villeurbanne – Société IZEO.
chkconfig Tel_Portable off Agenda ● Introduction – Mode de fonctionnement – Définitions ● Utilisation de base – Les commandes principales ● Utilisation.
1 Doxygen. 2 Doxygen : qu’est-ce que c’est ? Code C++, Java,... ● Un générateur de documentation – pour C + +, mais aussi C, Java, Fortran,... – Il fonctionne.
1 Java Avancé Eclipse pour les null Rémi Forax
1 Après 4 séances ● Ipn1 ipn2 ipn3 ipn4 ipn5 ipn6 ipn7 ipn8 ipn9 ● Hello OK- X OK- OK OK- X OK- OK ● Image OK X X OK-- X OK X X ● Shapes ● TpQt ● DrawQT.
Tour d'horizon de CMake Toulouse 26 janvier 2008Montel Laurent.
Free Mobile Marketing PowerPoint Shapes This is a sample text. Insert your desired text here. This is a sample text. Insert your desired text here. This.
Javascript et DOM Introduction Nicolas Chourot Informatique
Déjouer les pièges du Dockerfile
Publication site AROEVEN
Animé par : Renaud de Colombel
Vérification du Système fichiers et réparation
Openoffice 2 : Dessin vectoriel Première approche
Les outils du développeur
Les devoirs - homework Instructions:
Notes le 4-5 octobre Les articles définis (definite articles)
Mise en place d'un proxy SSH
Téléchargement IOS - Commande tftpdnld du ROM Monitor
Plugin POSH.
SPEAKING Proficiency Assessment
Des outils pour le développement logiciel
fonctionnalités iiS iis
Correction de travaux d'élèves avec MARKIN
Bonjour! C’est lundi! Sortez le devoir: fiche de travail: Les verbes réfléchis etc... Qu’est-ce que vous avez fait pendant le week-end? Ecrivez pendant.
Daily Routine and Times.
SPIP Pour faire un site sous Spip, voici une sélection d'outils.
Des outils pour le développement logiciel : Make
Prise en main Emmanuel Braux Institut Mines Telecom / Télécom Bretagne
Package R Markdown: Un outil pour générer des pages html avec R Studio
Présentation du projet Raspberry
Les pré-processeurs CSS Dereck, Eric, Jessy et Paola
Enter Your Screenshot Here INSERT LOGO HERE. Enter Your Screenshot Here This is a sample text. Enter your text here. Title Goes Here INSERT.
Introduction à la démarche DevOps
Journal télévisé de 20 heures
Journal télévisé de 20 heures
INFORMATIONS PERSONELLES
Formation git.
Les adjectifs possessifs
PAGE 1 PAGE 2.
Qu’est-ce que c’est?. Qu’est-ce que c’est? It’s a compound tense that we use in French to talk about things that happened in the past!
 C’est quoi Laravel ?  Installer Laravel 5 avec Composer  Structure des Fichiers  Créer une page d’authentification  Comment faire le Routing dans.
Cours jQuery. Plan du cours I. Introduction II. Les sélecteurs III. Les évènements IV. Quelques effets V. Manipulation du DOM 2.
Money Achievement This is a sample text. Insert your desired text here. Sample text This is a sample text. Insert your desired text here. Sample text This.
Marketing Perspectives This is a sample text. Insert your desired text here. Invest in marketing This is a sample text. Insert your desired text.
YII Yes It Is !.
JQuery (Débutant) 24 Mars SUPINFO Orléans.
MIAGE KSAR EL KEBIR Année scolaire: 2015/2016 Année de formation: 2017/2018 Année de formation: 2017/2018 Réalisé par : YOUSSEF BLAL Encadré par ANOUAR.
Journée 2ème: introduction
Transcription de la présentation:

Grunt : introduction Qu'est-ce que Grunt ? Un phacochère automatiseur de tâches Qu'est-ce qu'on peut faire avec ? Tout. En gros. Et plus vite qu'à la main.

Grunt : exemples Compiler (CSS, JS, HTML) Copier des fichiers Générer des sprites Appliquer des modifications sur des fichiers Valider du CSS, du JS Et ceci, soit à la demande, soit à la volée

Grunt : installation Via npm (donc il faut installer NodeJS avant) curl --silent --location https://deb.nodesource.com/setup_4.x | sudo bash - sudo apt-get install --yes nodejs sudo npm install -g grunt-cli Puis les plugins s'installent de la même manière sudo npm install <package> --save-dev

Grunt : configuration Gruntfile.js : c'est du JavaScript ! La fonction englobante (n'oubliez pas 'use strict';) Configuration du projet et des tâches Chargement des plugins et des tâches

Gruntfile.js : fonction englobante (function () { 'use strict'; module.exports = function (grunt) { // all your code } }());

Gruntfile.js : configuration du projet et des tâches Exemple du plugin grunt-sass require('load-grunt-tasks')(grunt); grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: { 'assets/css/style.css': 'assets/scss/style.scss' } });

Gruntfile.js : chargement des plugins et des tâches grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-scss-lint'); grunt.registerTask('default', ['watch:compile']); grunt.registerTask('validate', ['watch:validate']);

Cas du plugin « watch » Plugin contrib, essentiel si on compile souvent. // https://github.com/gruntjs/grunt-contrib-watch watch: { compile: { files: ['assets/**/*.scss'], // watch *.scss files in assets and sub-folders... tasks: ['sass', 'postcss'] // ... and launch tasks "sass" and "postcss" if one is modified }, validate: { tasks: ['scsslint'] }

Exemple Une page avec du html simple du CSS compilé via SCSS SCSS validé avec scss-lint CSS augmenté par PostCSS (fallbacks de rem, préfixes, minification) des sprites SVG et PNG