Grunt для новичков

[Sergik+]

Для начинающих очень мало расписано по настройке gruntfile.js, как правило сразу же дебри расписаны а вот простой настройки нигде не нашел а может просто плохо искал, поэтому решил создать данную тему.

Прошу оценить, может есть замечания.

 

module.exports = function(grunt) {

 

grunt.initConfig({

 

  watch: {

    options: {

      livereload: true,

    },

    sass: {

      files: 'sass/*.scss',

      tasks: ['sass'],

    },

    html: {

      files: 'index.html',

      tasks: [],

    },

    css: {

      files: 'css/*.css',

      tasks: [],

    },

  },

  sass: {

    dev: {

      src: ['sass/*.scss'],

      dest: 'css/main.css',

    },

  },

});

 

  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.loadNpmTasks('grunt-contrib-sass');

 

  grunt.registerTask('default', ['watch']);

 

};

 

Единственное что тут хотелось это следить за изменениями в sass папочке и при изменении

запускать компиляцию а при изменении в css и html запускать livereload.

Пока еще думаю что делать с css html, и еще добавлю такс по поднятию сервера.

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

Edited August 15, 2014 by Sergik+

[klierik]

про livereload не скажу ибо оно подходит в основном только для мелких сайтов.

 

Единственное что тут хотелось это следить за изменениями в sass папочке и при изменении запускать компиляцию а при изменении в css и html запускать livereload.

Я не смог понять какая мысль в данном предложении.

 

Пока еще думаю что делать с css html, и еще добавлю такс по поднятию сервера.

 

тут аналогично.

 

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

выбор таки не очень что бы большой, но по хорошему https://www.npmjs.org/package/grunt-contrib-compass уж коль SASS используешь. 

[Sergik+]

Я вот тоже смотрю что на серьезных проектах не пользуются livereload, а чем там пользуются ?

Кстати глядел видео Юрия Артюха он в sass нигде не использует скобки и точки с запятой,

это как сделано, пробую как он у меня при компиляции ворнинги валятся. 

Кстати у него же для спрайтов используется пустой элемент <i> в html что многие не рекомендуют,

а мне данный способ кажется самым простым, наверное буду им пользоваться.

Edited August 15, 2014 by Sergik+

[npofopr]

Для начинающих очень мало расписано по настройке gruntfile.js

да таки очень много инфы, только вся в EN.

 

что делать с css html

https://github.com/gruntjs/grunt-contrib-copy хотя бы.

У себя в gulp я использую для html - gulp-htmlhint, для grunt есть тоже самое. За одним проверяется на всякие там: повторяющиеся id, не закрытые теги и т.п.

Для обычного css - как раз copy.

 

Тут http://nano.sapegin.ru/all/grunt-0-4 по-моему всё довольно подробно расписано.

[Sergik+]

Прочитал все, пока просто обдумываю что мне надо. За htmlhint спасибо, обязательно подключу.

[klierik]

Я вот тоже смотрю что на серьезных проектах не пользуются livereload, а чем там пользуются ?

 

ничем.

 

Кстати у него же для спрайтов используется пустой элемент <i> в html что многие не рекомендуют, а мне данный способ кажется самым простым, наверное буду им пользоваться.

я тоже им пользуюсь

 

Кстати глядел видео Юрия Артюха он в sass нигде не использует скобки и точки с запятой, это как сделано, пробую как он у меня при компиляции ворнинги валятся. 

можно спросить у автора. 

[mishka]

пользуюсь такой вот программкой http://alphapixels.com/prepros/

 

Не пользовался grunt, но из того что прочитал о нем, понял что препрос делает то же самое, только имеет GUI + настройки можно в файлах хранить.

 

По поводу JSHint/JSLint -- имхо удобнее если ваш редактор умеет это проверять и сразу подсвечивать проблемный код.

 

 

P.S. статья на хабре http://habrahabr.ru/post/188942/

Из коментов понял что grunt мощнее, в общем надо разбираться с grunt

[nerv]

может есть замечания

для оформления кода на форуме используют спец. теги

пользуюсь такой вот программкой http://alphapixels.com/prepros/

интерфейс (графическое оформление) похож на https://windows.github.com/

видимо, тренд)

Edited August 15, 2014 by nerv

[swandev]

пользуюсь такой вот программкой http://alphapixels.com/prepros/

 

Не пользовался grunt, но из того что прочитал о нем, понял что препрос делает то же самое, только имеет GUI + настройки можно в файлах хранить.

 

По поводу JSHint/JSLint -- имхо удобнее если ваш редактор умеет это проверять и сразу подсвечивать проблемный код.

 

 

P.S. статья на хабре http://habrahabr.ru/post/188942/

Из коментов понял что grunt мощнее, в общем надо разбираться с grunt

+ сам пользуюсь, удобно

еще есть koala которая также есть под linux, но там вроде нет Livereload

[xzarxzes]

Кстати глядел видео Юрия Артюха он в sass нигде не использует скобки и точки с запятой

Это sass indented syntax, он был синтаксисом для sass изначально, потом в угоду тем кто больше привык к ситаксису css, сделали scss синаксис. Мне лично больше нравится indented syntax, там можно миксины делать без приставки mixin, а просто писать =, и инклюдить их потом без include, а просто писать +, ну и можно забыть про ; и брэкиты.

 

В грунте можно еще не писать по многу раз grunt.loadNpmTasks( 'grunt-plugin'), а использовать плагин load-grunt-tasks. Также чтобы посмотреть как настраивать тот или иной плагин для грунта, можно поставить себе yomen и ставить соответствующий генератор и смотреть как там настраиваются плагины в Gruntfile.

 

upd: для indented syntax при создании проекта надо указать compass create project_name -x sass или в config.rb указать в preferred syntax - sass, ну и делать файлы сасс форамта sass а не scss

 

ссылки на курсы по грунту итд: http://code.tutsplus.com/courses/getting-good-with-grunt, http://code.tutsplus.com/courses/say-yo-to-yeoman, http://code.tutsplus.com/courses/pro-front-end-workflows, их можно найти на торрентах

Edited August 15, 2014 by xzarxzes

[mishka]

 пользуюсь такой вот программкой http://alphapixels.com/prepros/

интерфейс (графическое оформление) похож на https://windows.github.com/

видимо, тренд)

 

Главное что удобный и приятный.

 

+ сам пользуюсь, удобно

 

 

 

еще есть koala которая также есть под linux, но там вроде нет Livereload

 

Сразу ставил руби инсталлер и Sass + Compass

потом начал искать инструменты с GUI, нашел коалу, немного попользовался, но когда попробовал препрос то на нем и остался. 

Сейчас он полностью решает все задачи которые мне нужно.

Да и еще кроссплатформенный.

 

Почитав отзывы о grunt, понял что не помешает в нем разобраться. Он под виндой работает?

[npofopr]

И вместо livereload я использую http://www.browsersync.io/docs/

 

Кстати, почему grunt, а не gulp? :-)

[xzarxzes]

Кстати, почему grunt, а не gulp? :-)

Я решил сначала разобраться с grunt, а потом попобовать gulp. По грунту больше информации можно найти и для yomen больше генераторов которые работают с грунтом.

[Sergik+]

Скажу сразу никого не отговариваю от визуальных средств, много людей пользуются и не испытывают никаких проблем.

Но мне grunt как раз понравился тем что как не странно gruntfile.js и командная строка убыстряет разработку.

И вместо livereload я использую http://www.browsersync.io/docs/

 

Кстати, почему grunt, а не gulp? :-)

Насколько я понял gulp еще проще, он появился позже и более юзер френдли.

[npofopr]

Насколько я понял gulp еще проще, он появился позже и более юзер френдли.

вроде как да)  

[ows.nightwolf]

 

Кстати глядел видео Юрия Артюха он в sass нигде не использует скобки и точки с запятой

Это sass indented syntax, он был синтаксисом для sass изначально, потом в угоду тем кто больше привык к ситаксису css, сделали scss синаксис. Мне лично больше нравится indented syntax, там можно миксины делать без приставки mixin, а просто писать =, и инклюдить их потом без include, а просто писать +, ну и можно забыть про ; и брэкиты.

 

Note that this syntax is not recommended for use in new Sass files. It will print a warning if it’s used, and it will be removed in a future version.

А жаль( я бы пользовался(

 

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

Edited August 15, 2014 by ows.nightwolf

[sigma77]

Почитав отзывы о grunt, понял что не помешает в нем разобраться. Он под виндой работает?

Да, работает. Он же на node.js написан.