Как установить и настроить grunt?

Question

[Diode Bot]

Вчера задал вопрос по stylus, получил совет использовать grunt. Читал туториалы, блоги, документацию... И нигде не смог найти внятную информацию по доведению всей этой процедуры до вида, готового к работе над проектом.

Есть папка проекта, есть установленные node.js и stylus, вроде установил grunt по командам, которые указаны в уроках и мануалах, он устанавливается, но что делать дальше - я не могу понять. Все объяснения кажутся какими-то непонятными и недоговоренными.

Поэтому прошу кого-нибудь, кто успешно работает с этой системой, составить как можно более подробное описание шагов "для-самых-маленьких" вроде "открыть командную строку, перейти в такую-то директорию, чтобы сделать то-то и то-то, потом создать такой-то файл и вписать туда такой-то код".

Спасибо.

Answer 1

[Moraxus]

может поможет
www.youtube.com/watch?v=6mYgrJK768M#t=2285

Comments

[Diode Bot]

Спасибо, это ближе всего к тому, что нужно.

Answer 2

[zjoin]

Здесь очень доступно описано https://frontender.info/grunt-is-not-weird-and-hard/

Answer 3

[pomeo]

Да не нужен вам grunt

app.use(stylus.middleware({
      src: __dirname + '/styles',
      dest: __dirname + '/public',
      compile: function(str, path) {
          return stylus(str)
            .set('compress', true);
      }
  }));

app у меня это var app = module.exports = express(); но это не столь важно.

Значит файлы .styl лежат в /styles , например /styles/style.styl , если он меняется, то при обновлении страницы где есть запрос вида /style.css , node.js генерит из style.styl файл /public/style.css

Comments

[pomeo]

ну и var stylus = require('stylus') , но это очевидно

Answer 4

[Сергей Протько]

grunt вам посоветовали использовать, так как помимо stylus потом вы захотите еще и картинки автоматически при сбокре минифицировать, или еще чего...

grunt это всего лишь таск менеджер, его можно спокойно заменить на bash-скрипт. А еще к нему можно настроить watcher-ы которые будут все ребилдить после изменения и запускать livereload. Эта штука иногда экономит много нервов. Ну и преимущество использования в том что есть куча всего готового.

А так... оффициального сайта вполне достаточно. Просто задавайте таск. настраиваете и выполняйте.

Comments

[Diode Bot]

@Fesor я знаю, что это и для чего это нужно. У меня проблема в том, что "Просто задавайте таск. настраиваете и выполняйте" для меня совсем не просто.Это "Просто сделайте" всюду. Я не понимаю, как это сделать. Я вижу команду установки grund, которую надо писать в командной строке, ноне понимаю, деталей - нужно ли менять директорию, которая стоит по умолчанию, или это не имеет значения или надо для каждого проекта делать отдельную установку. Поэтому попросил пошаговое описание. Официального сайта достаточно, когда все правильно установлено и готово к использованию но что делать в промежутке между установкой node.js и написанием скриптов и watcher'ов.
Проблема в том, что я не могу правильно его установить и приступить к работе.

[Сергей Протько]

1. Установите grunt локально для проекта (то самое что npm install --save)
2. Создайте файлик Guntfile.js
3. Далее по примеру (котоых тысячи на гитхабе есть, например такой: https://github.com/angular-app/angular-app/blob/ma...)

[Сергей Протько]

grunt.loadNpmTasks - загружает таски из плагина, что бы они были доступны вам

grunt.registerTask - создает ваш собственный таск. Ваша задача, просто сконфигурировать таски предоставляемые плагинами и если нужно написать свои.

Answer 5

[Sergeniy]

Grunt - Обзор системы сборки от Sorax