НовостиАдминистрированиеУправления хостингомАрхив
28 октября 2015

Краткое руководство по PostCSS: Настройка Grunt

В прошлом уроке мы прошли настройку проекта PostCSS с Gulp. В этом уроке мы разберемся с тем же, но с использованием Grunt. К концу этого урока вы будете знать, как настроить проект PostCSS + Grunt с любым набором плагинов.

Необходимые условия

Так как мы будем работать с Grunt, предположим, что у вас уже есть все необходимое для его использования:

  • Node.js
    • NPM
    • Git

Прежде чем вы пойдете дальше, у вас должна быть папка проекта со следующим:

  • gruntfile.js (Grunt-файл)
    • Файл package.json
    • Grunt, установленный в папку node_modules и настроенный как dev-зависимость для вашего проекта.

PostCSS и GruntВ

В папке проекта создайте две подпапки, одну под названием \"src\", вторую \"dest\". В папке \"src\" буду храниться необработанные CSS-файлы, а в папку \"dest\" будут записываться файлы, обработанные PostCSS.

Следующее, что вам нужно сделать установить в свой проект плагин Grunt для PostCSS: для выполнения компиляции мы будем использовать grunt-postcss.

В терминале/командной строке, связанной с папкой вашего проекта, выполните команду: 

1	 npm install grunt-postcss --save-dev

После завершения установки, структура вашего проекта должна выглядеть следующим образом:

Теперь откройте для редактирования свой Grunt-файл и начните добавлять базовый шелл-код, необходимый для всех Grunt-файлов: 

module.exports = function(grunt) {   
};

Внутри него для загрузки в наш плагин grunt-postcss мы будем использовать функцию grunt.loadNpmTasks(): 

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-postcss');
};

Теперь мы готовы начать настраивать задачу Grunt, которая будет использоваться для запуска postcss. Для начала, добавьте функцию grunt.initConfig()над строкой, которую мы только что добавили: 

module.exports = function(grunt) {
  grunt.initConfig({
  
  });
  grunt.loadNpmTasks('grunt-postcss');
};

В ней настройте объект под названием postcss: 

module.exports = function(grunt) {
  grunt.initConfig({
    postcss: {
       
    }
  
  });
  grunt.loadNpmTasks('grunt-postcss');
};

Внутри нового объекта postcss мы добавим два дополнительных вложенных объекта, один под названием options и еще один под названием dist: 

module.exports = function(grunt) {
  grunt.initConfig({
    postcss: {
      options: {
      },
      dist: {
         
      }
    }
  
  });
  grunt.loadNpmTasks('grunt-postcss');
};

Объект options будет содержать конфигурации для PostCSS, а объект dist будет содержать информацию о том, откуда будут считываться и куда записываться наши CSS-файлы.

Теперь создайте CSS-файл под названием \"style.css\" в папке \"src\" своего проекта. Добавьте немного тестового кода, например, такого: 

.test {
    background: black;
}

Теперь обновите объект dist, чтобы указать \"src/style.css\" в качестве исходного файла, а \"dest/style.css\" в качестве файла, который нам нужно сгенерировать: 

dist: {
  src: 'src/style.css',
  dest: 'dest/style.css'
}

Теперь внутри объекта options создайте пустой массив под названием processors. Здесь немного позже мы сконфигурируем плагины PostCSS, которые будем использовать. А сейчас просто обновите его до: 

options: {
  processors: [
  ]
},

Запуск тестовой компиляции

Ваша базовая задача postcss теперь готова для запуска. Чтобы протестировать ее, в терминале/командной строке, которая все еще связана с папкой проекта, выполните команду: 

1	 grunt postcss

В терминале должно появиться следующее сообщение: 

Running \"postcss:dist\" (postcss) task
>> 1 processed stylesheet created.

А теперь в папке \"dest\" вы должны обнаружить новый файл \"style.css\", содержащий тот же код, что и в файле \"style.css\" в папке \"src\".

Добавление плагинов PostCSS

А теперь мы добавим набор плагинов и пакетов PostCSS: Autoprefixer (добавляет префиксы поставщика), cssnext (включает синтаксис будущего) и precss (добавляет функциональные возможности вроде Sass).

Выполните следующие команды, чтобы установить каждый плагин в свой проект: 

npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precess --save-dev

Примечание: Установка cssnext и precss может занять определенное время, так как эти пакеты состоят из нескольких плагинов.

Теперь мы готовы загрузить каждый из плагинов через массив processors, который мы создали ранее. Обновите этот массив до следующего состояния: 

processors: [
  require('autoprefixer')(),
  require('cssnext')(),
  require('precss')()
]

А теперь давайте добавим немного тестового кода в наш исходный файл \"style.css\" и проверим, что наши только что установленные плагины PostCSS работают должным образом.

Удалите все, что есть в этом файле, и вместо этого добавьте следующий CSS: 

/* Testing autoprefixer */
.autoprefixer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* Testing cssnext */
.cssnext {
  background: rgba(255, 0, 0, 0.9);
}
/* Testing precss */
.precss {
  background: green
}

Как вы видите, в классе .autoprefixer Autoprefixer добавил префиксы поставщика. В классе .cssnext cssnext сгенерировал цвет rgba(). И, наконец, в классе .precss PreCSS провел оценку условной инструкции @if @else.

Настройка опций плагинов

Обратите внимание, что если вы хотите настроить опции плагина, пропустите эти опции через вторую пару скобок после функции require() этого плагина. Например, вы можете указать списку браузеров, что хотите отключить Autoprefixer, таким образом: 

processors: [
  require('autoprefixer')({browsers: ['last 1 version']}),
  require('cssnext')(),
  require('precss')()
]

Совместная работа над проектом

Красота PostCSS заключается в его способности настраиваться с любым набором плагинов. Однако в этом возникает новая проблема нужно убедиться, что у остальных людей, которые хотят работать с этим проектом, есть тот же набор плагинов PostCSS. Благодаря npm, эта проблема решается с помощью системы управления зависимостями.

Так как вы используете метку --save-dev каждый раз, когда устанавливаете плагин в свой проект, она добавляется в файл \"project.json\" в качестве dev-зависимости. Это означает, что, если вы хотите организовать совместную работу над вашим проектом с другими людьми, они могут запустить команду npm install в пакете, который вы им предоставили, и получить автоматическую установку тех же плагинов.

Давайте повторим

  • Создайте проект npm с установленным Grunt и Grunt-файлом
    • Установите плагин grunt-postcss
    • Настройте оболочку Grunt-файла, загрузив grunt-postcss с помощью grunt.loadNpmTasks('grunt-postcss');
    • Создайте задачу grunt, чтобы скомпилировать CSS
    • В задаче настройте объект options, содержащий массив processors
    • Также с помощью задачи настройте объект dist, указав исходные файлы и место назначения для скомпилированных файлов.
    • Эти же основные шаги помогут вам включить в свой проект любой другой плагин PostCSS:
    • Установите в свой проект плагин с помощью npm install --save-dev
    • Добавьте имя этой переменной в массив preprocessors с помощью функции require() require('')().

Теперь вы знаете, как использовать Gulp и Grunt, чтобы работать на PostCSS с любыми плагинами, которыми только захотите. Следующее, что вам нужно - изучить экосистему плагинов PostCSS и найти отличные плагины для проектов, над которыми вы хотели бы работать. Именно это мы и рассмотрим в следующем уроке \"Краткое руководство: Обзор плагинов\".

По материалам webdesign.tutsplus.com

Читайте также