Grunt Autoprefixer — установка и настройка
Grunt Autoprefixer — это плагин, который сканирует CSS файлы и расставляет вендорные префиксы (-webkit-, -moz и др.), используя базу Can i use, чтобы определить какие префиксы нужны. Он очень легко настраивается и устанавливается. Google рекомендует его использовать, также autoprefixer активно использует Twitter.
Примеры работы плагина
Исходный CSS:
1 2 3 | a { transition: transform 1s } |
После обработки autoprefixer:
1 2 3 4 5 | a { -webkit-transition: -webkit-transform 1s; transition: -ms-transform 1s; transition: transform 1s } |
Можете попробовать интерактивное демо.
Установка autoprefixer
В данный момент autoprefixer используется как плагин postcss. Для установки откройте консоль, перейдите в корневую папку вашего проекта и запустите команду:
1 | npm install grunt-postcss autoprefixer-core --save-dev |
Настройка Gruntfile.js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | module.exports = function(grunt) { var autoprefixer = require('autoprefixer-core'); require('load-grunt-tasks')(grunt); grunt.initConfig({ postcss: { options: { processors: [ autoprefixer({ browsers: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'] }).postcss ] }, dist: { files: { 'dist/': 'css/*.css' } } } }); grunt.registerTask('default', ['postcss']); }; |