Grunt vs Gulp vs Prepros vs Codekit?

Question

[Иван Стеблев]

Собственно что, кому удобней и почему?

Answer 1

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

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

Prepros - не серьезно. Если честно даже не знаю что тут сказать, для верстальщика норм, для фронтэнда - на любителя.

Codekit - не серьезно. Для тех кто не в состоянии разобраться с чем-то более гибким.

Gulp - наше все. Никаких временных файлов, все манипуляции в памяти за счет чего все очень быстро, очень гибко (code over configuration)... Начиная с версии 4 будет вообще ништяк. Использовать что-то другое не вижу смысл. Только для специфичных задач или от лени.

Comments

[zooks]

Сергей, такой вопрос. Поможет ли замена grunt на gulp ускорить рендеринг Sass? И есть ли в нем livereload.

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

zooks: только один стэп - нет, node-sass и так быстро все делает. А вот если у вас достаточно жирный стэк (sass -> autoprefixer -> csso -> всякие другие штуки) и очень много файлов (скажем у вас несколько файлов, типа main.scss, 404.scss, critical-path.scss, последний надо заинлайнить в тело страницы и т.д.) - то тут уже есть варианты. - но да. Вот со скриптами уже веселее - там можно загрузить в стрим сразу все файлы и только по изменению файлов релоадить только то что поменялось - минимум чтения с диска - максимум скорость.

Для инкрементной сборки все есть. Мне нравится browserSync.

[zooks]

Забыл упомянуть, что использую Compass и соответственно grunt-contrib-compass. Файлов не более четырех. На мощном процессоре компиляция идет 6-7 секунд. И перенос проекта на SSD никак не помогает.

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

zooks: вывод - отказаться от compass и реализации на ruby. Ruby жутко медленный язык даже по сравнению с JS. Gulp тут ничего не ускорит так как в этом случае он просто запустит компас. то есть если у вас 6-7 секунд занимает компиляция, галп тут ничего не поделает.

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

zooks: вот серьезно, зачем вам compass? Миксины? Есть отдельно, без экстеншена. Префиксы? autoprefixer надежнее. Спрайты - есть отдельные плагины... разделение обязанностей с одного жирного решения на несколько поменьше галп уже в состоянии оптимизировать.

[zooks]

Сергей Протько: на простеньких проектах compass по-сути нужен только для обнуления стилей. Можно отказаться от реализации на Ruby, но в сторону чего?

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

zooks: node-sass норм, чуть отстает конечно от реализации на ruby но не критично, зато в разы быстрее (Использует реализацию на C++)

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

zooks: а что до нормализации - так в bower же все есть + есть https://github.com/Igosuki/compass-mixins

[zooks]

Сергей Протько: 4.8s - изначальная скорость.
3.9s - Отключение лишних модулей Compass, частичная замена на свои миксины.
3.4s - переход на Gulp.js. (замер через gulp-duration)
Итого: -1.4s.
Отказаться от SASS на Ruby пока не могу. Попробую подружить libsass и compass/reset на одном проекте.

[zooks]

Сергей Протько: Полная ликвидация Compass в проекте ускорила компиляцию еще на 1 секунду - до 2.4s. Но теперь Gulp при допущении ошибки в коде Sass выводит ее на экран и завершается. Когда Grunt после ошибки спокойно продолжал работать. Возможно ли это как-то пофиксить?

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

zooks: в ватчерах? Если так то есть gup-plumber.

[zooks]

Сергей Протько: Почему-то не помог plumber:

gulp.task('styles', function() {
return sass('_/components/sass', {
    loadPath: ['bower_components/compass-mixins/lib'],
    style: 'expanded'
    }) //includePaths
    .pipe(plumber())
    .pipe(gulp.dest('app/assets/temp'))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(minifycss())
    .pipe(duration('rebuilding files'))
    .pipe(gulp.dest('public_html/css'));
});

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

zooks: plumber надо было включать ДО. Ну раз так то:

function handleError(err) {
  console.log(err.toString());
  this.emit('end');
}

return sass(...).on('error', handleError)
    .pipe()...

[zooks]

Сергей Протько: Огромное спасибо за советы. В итоге перенес один проект на Gulp. Он оказался сложнее в настройке, чем Grunt и модули подглючивают - перестал выводить время рендеринга при включении gulp-sass. Но теперь сложилось однозначное понимание, что SASS на Ruby слишком тормозной. Отныне только node-sass. Compass тоже должен переходить на libSass.

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

zooks: от compass можно отказаться просто. Он банально не нужен, пережиток былых лет.

Answer 2

[aemxdp]

Использую 'npm run'. Зачем все эти билд-системы, когда есть linux?
Продемонстрирую на примере прикручивания jshint:
grunt:

module.exports = function(grunt) {  
  grunt.initConfig({
    jshint: {
      files: ['**.js'],
      options: JSON.parse(require('fs').readFileSync('./.jshinrc'))
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
};

gulp:

var jshint = require('gulp-jshint');  
var gulp   = require('gulp');  
gulp.task('jshint', function() {  
  return gulp.src('**.js')
    .pipe(jshint());
});

npm run (coffee syntax):

"scripts":
  "jshint": "jshint **.js"

Как говорится, write less - create more!
См. также:
blog.keithcirkel.co.uk/why-we-should-stop-using-grunt
substack.net/task_automation_with_npm_run

Answer 3

[uam]

использую галп, потому-что быстрее и если подключать и настраивать множество плагинов, конфиг остается читаемым

Answer 4

[zooks]

Лично мне нравится Grunt.
Gulp не пробовал.

UPD: Gulp чуть сложнее в настройке, чем Grunt. Но более скоростной. Какой из них использовать - дело вкуса.

Answer 5

[Ринат Туктаров]

С другой стороны, вот я например пользовался gulp, но по факту получается что для простого старта легче запустить codekit и уже начать, нежели ставить сначала gulp локально в папку, проверять конфиги. Да и в общем-то codekit как минимум шустрее компилит scss файлы. Поэтому отказался от gulp пару месяцев назад и меня все устраивает.
З.Ы. Конечно же не всем подойдет, я банальный фронтендер.

Answer 6

[Константин Китманов]

Grunt — больше плагинов, Gulp — шустрее и проще.
Платное, да еще и с гуем? Гуйня.

Comments

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

под Grunt плагинов больше, но того что есть под gulp уже с головой хватает. Так что это не аргумент. По поводу "проще" - не сказал бы. Либо одинаково либо даже сложнее в некоторых моментах. А шустрота... чем сложнее сборка тем быстрее она будет происходить относительно реализации на гранте.

[Максим Самойлов]

На gulp можно запускать плагины для grunt при помощи плагина gulp-grunt

[Андрей]

Больше плагинов не значит лучше. Во-первых, меньше модулей — меньше хлама.
Во-вторых многие вещи в gulp можно делать обычными npm-модулями, не оборачивая их в плагин.

Answer 7

[lega]

Использую Gulp, раньше пробовал Grunt.
Так вот Grunt плох тем что это тупой конфиг, зачем это когда можно использовать JS, чуть в сторону и этих конфигов уже не достаточно. Вообщем это как сравнивать JS с Json по возможностям :)