11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai décidé de balancer mes bonnes vieilles mixins Sass prenant en charge les préfixes css au profit d'Autoprefixer via Grunt.

La plupart de mes plugins Grunt fonctionne mais j'ai du mal à configurer Autoprefixer. Le terminal ne me renvoie pas d'erreur, mais je n'ai pas d'ajout de préfixe dans mes fichiers.

Voici mon code Gruntfile.js pour cette partie :
		autoprefixer: {
			dist: {
				expand: true,
				flatten: true,
				src: 'Styles/Public/*.css',
				dest: 'Styles/Public/',
			},
		},

Le code Gruntfile.js dans son ensemble est disponible sur Github : Gruntfile.js

Merci pour vos conseils.
Modérateur
Salut,

Il ne faudrait pas aussi rajouter la tache ici ?
grunt.registerTask('default', ['jshint','uglify','sass']);


[EDIT]

Et juste au vol pour faire avancer le schmilblick je ne sais pas si les virgules en fin d'accolades ne foirent pas ta tache aussi :

autoprefixer: {
  dist: {
    expand: true,
    flatten: true,
    src: 'Styles/Public/*.css',
    dest: 'Styles/Public/',
  },// là
},// et là

Modifié par _laurent (16 Feb 2015 - 17:15)
_laurent a écrit :
Il ne faudrait pas aussi rajouter la tache ici ?
grunt.registerTask('default', ['jshint','uglify','sass']);

La ligne que tu mentionnes, c'est la file d'attente des taches à effectuer si l'on tape "grunt" dans le terminal. Ceci dit c'était quand même un oubli, du coup je l'ai ajouté au fil. Merci.

Mais j'ai aussi paramétré mon Gruntfile.js pour que les fichiers styles et javascripts soient traités à chaque modifs enregistrées grâce à la tâche "watch", visible plus haut dans le fichier. Le préfixage aurait dû fonctionner par ce biais, d'ailleurs les autres tâches fonctionnent sans problème :
watch: {
	options: {			// Options générales pour toutes les sous-tâches
		spawn: false,		// Permet de gagner du temps dans l'analyse
		livereload: true,	// Rafraichissement du navigateur
	},
	scripts: {			// Sous-tâche pour les scripts
		files: ['**/*.js', '!Gruntfile.js'],
		tasks: ['jshint','uglify'],
	},
	styles: {			// Sous-tâche pour les styles
		files: ['**/*.scss'],
		tasks: ['sass', 'autoprefixer'],
	},
},


_laurent a écrit :
Et juste au vol pour faire avancer le schmilblick je ne sais pas si les virgules en fin d'accolades ne foirent pas ta tache aussi...

Non, j'avais déjà testé, d'ailleurs j'ai remarqué que ce n'est jamais un souci sur un fichier .js. Je les laisse car cela m'évite d'oublier bêtement une virgule en cas d'ajout de paramètres.
Modifié par Olivier C (16 Feb 2015 - 18:08)
C'est bon, j'ai trouvé : je ne pouvais tout simplement pas travailler sur le même fichier apparement... Au lieu de faire un truc du genre :
autoprefixer: {
	dist: {
		expand: true,
		flatten: true,
		src: 'Styles/Public/*.css',
		dest: 'Styles/Public/',
	},
},


Il faut mettre le fichier dans un autre dossier ou le renommer :
autoprefixer: {
	dist: {
		expand: true,
		flatten: true,
		src: 'Styles/Public/*.css',
		dest: 'Styles/Public/PreCss/',
	},
},

Adieu les mixins SASS qui alourdissaient le code et surtout la veille techno qu'il fallait consacrer aux mixins dédiées au préfixes. Je voulais me pencher depuis un moment sur Autoprefixer car c'était une solution proposée par Hugo Giraudel lui-même.

Je marque le sujet comme résolu, mais j'aurais préféré travailler sur le même fichier. Si vous avez une solution sur ce dernier point je suis toujours preneur. Edit du 17/02 : et bien voilà j'ai trouvé, Grunt ne peut pas le faire à priori, il faut passer par son concurrent Gulp, qui gère les tâches dans une file.
Modifié par Olivier C (17 Feb 2015 - 06:30)