https://www.wiki.leomartin.net/ 2026-04-10T19:18:24+00:00 https://www.wiki.leomartin.net/ https://www.wiki.leomartin.net/lib/tpl/dokuwiki/images/favicon.ico text/html 2016-03-29T10:36:39+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:adding_task_options_and_defaults&rev=1459240599&do=diff <- Creating your first Grunt taskProcessing Sass files -> -> <http://gruntjs.com/plugins> -> référence les plugins et donne les infos de configuration et options possibles. module.exports = function(grunt) { grunt.initConfig({} concat: { options: { separator: '\n\n-----\n', banner: '\n\n-----\n', }, dist : { // dist peut être appelé autrement src: ['components/scripts/*.js'], // version non ordonnée // src: ['zulu.js', 'alpha.js', 'li… text/html 2016-04-03T23:37:55+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:automating_our_workflow&rev=1459719475&do=diff <- Processing Sass filesReloading our pages -> -> grunt watches -> grunt contrib-watch (quand y'a contrib devant un plugin -> grunt team) <npm install grunt-contrib-watch --save-dev -> Bonne habitude : aller dans le get started du plugin et just pécho le code associé. (...) watch:{ options: { spawn: false, }, script: { files: ['builds/development/**/*.html', 'components/scripts/**/*.html', 'components/sass/**/*.scss'], // les fichiers a surveiller … text/html 2016-03-29T12:23:14+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:combining_bower_scripts_and_css&rev=1459246994&do=diff <- Integrating Bower into our workflowNext Steps -> -> grunt-bower-concat npm install grunt-bower-concat --save-dev // gruntfile.js (...) //nouvelle tâche bower_concat { all: { dest: 'builds/developments/js/_bower.js', cssDest: 'builds/development/css/_bower.css', }, } (...) grunt.loadNpmTasks('grunt-bower-concat'); grunt.registerTask('default', ['wiredep', 'bower_concat', 'concat', 'sass', 'connect', 'watch']); text/html 2016-03-29T10:11:28+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:creating_your_first_grunt_task&rev=1459239088&do=diff <- Preparing our projectAdding task options and defaults -> Créer un fichier de configuration gruntfile.js module.exports = function(grunt) { grunt.initConfig({} concat: { dist : { // dist peut être appelé autrement src: ['components/scripts/*.js'], // version non ordonnée // src: ['zulu.js', 'alpha.js', 'lima.js'], // version ordonnée dest: 'builds/development/js/script.js', }, }, ); // initConfig grunt.loadNpmTasks('grunt-contrib-con… text/html 2016-04-03T20:59:19+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:exploring_our_workflow&rev=1459709959&do=diff <- Using the exercise filesPreparing our project -> / /bower_components /lib_x /builds /development /css _bower.css // css des librairies et frameworks concaténés style.css // css du projet (depuis sass) /images /js _bower.js // js des librairies et frameworks concaténés script.js // js du projet concaténé /components /sass /js // ces deux dossier sont compilés puis envoyés dans les dossier de /builds /node_modules bower.json gruntfile.js // tâches g… text/html 2016-03-29T12:07:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:integrating_bower_into_our_workflow&rev=1459246040&do=diff <- Working with BowerCombining Bower scripts and CSS -> -> grunt wiredep -> inject Bower packages into your source code with Grunt npm install --save-dev grunt-wiredep // grunfile.js (...) //nouvelle tâche wiredep: { task: { src: 'builds/development/**/*.html', }, }, (...) grunt.loadNpmTasks('grunt-wiredep'); (...) grunt.registerTask('default', ['wiredep', 'concat', 'sass', 'connect', 'watch']); text/html 2016-03-29T12:26:03+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:next_steps&rev=1459247163&do=diff <- Combining Bower scripts and CSS -> -> grunt plugins -> bower.io plugins -> Voir cours Cuilding a mobile app with angularJS and Ionic et d'autres text/html 2016-03-29T09:58:24+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:preparing_our_project&rev=1459238304&do=diff <- Exploring our workflowCreating your first Grunt task -> // dans le dossier du projet npm init { "name": "web-workflow", "version": "0.0.1", "description": "a project template", "author": "author name", "license": "MIT", } sudo npm install -g grunt-cli grunt-cli --version text/html 2016-03-29T12:18:02+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:processing_sass_files&rev=1459246682&do=diff <- Adding task options and defaultsAutomating our workflow -> -> sass-lang.com -> contrib-sass (nécessite ruby) -> grunt-contrib (c++ pas forcément à jour, nécessite node-sass) Pour le second, utilisé dans la vidéo npm install node-sass npm install --save-dev grunt-sass // grunfile.js // nouvelle tâche sass: { dist: { options: { style: 'expanded', // aussi : nested/compact/compressed }, files: [{ src: 'components/sass/style.scss', dest: 'builds/developmen… text/html 2016-03-29T11:48:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:reloading_our_pages&rev=1459244901&do=diff <- Automating our workflowWorking with Bower -> -> grunt-contrib-reload Plusieurs manières de l'intégrer. Direct via <script src=“”> mais signifie intégrer du code qu'on va enlever après, via plugin navigateur ou autre. npm install grunt-contrib-connect --save-dev //gruntfile.js //nouvelle tâche connect: { server: { options: { hostname: 'localhost', port: 3000, base: 'builds/development/', livereload: true, }, }, }, (...) watch: { options: { spaws:… text/html 2016-03-29T11:54:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.wiki.leomartin.net/doku.php?id=wwwgjs:working_with_bower&rev=1459245298&do=diff <- Reloading our pagesIntegrating Bower into our workflow -> -> “a package manager for the web” -> “sort of npm for your web projects” bower init // créé un fichier bower.json de la même manière que npm init bower install --save bootstrap -> bower.io/search pour les packages