webdisigner

gulp.task('sass', function () {
  gulp.src('css/main.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(prefix('last 15 versions'))
    .pipe(gulp.dest('_site/css'))
    .pipe(browserSync.stream());
});

gulp.task('watch', function () {
    gulp.watch('css/**/*.scss', ['sass']);
    gulp.watch(['*.html', '_layouts/*.html', '_includes/*.html', '_posts/*'], ['jekyll-rebuild']);
});
gulp.task('default', ['browser-sync', 'sass', 'watch']);

Один совет, попробуй плагин all-tasks

Сначала поработай с нативным css,html,js - 1 годик так точно
Потом поработай с bootstrap, сначала научись переопределять стили, потом изменять стили в исходном файле bootstrap.css. После этого научись пользоваться файлами bootstrap.js ну и конечно тут не обойтись без фундаментальных знаний Jquery - 15-30 дней и ты уже в теме
Потом установи sass, и поработай с ним через командную строку
Потом попробуй расширить sass, например установи susy, breakpoint-sass
Опять поработай с командной строкой - 14-30 дней
Потом установи интерпритатор sass, например compass
Разузнай все тут, поработай с командной строкой, установи config для compass`a
7-10 дней на это все, многое узнаешь.. - 2 дня макс.
->
Потом чтобы это все говно сжать у себя в мозгу как раз придумали gulp
Вот с этих пор, ты познаешь истинное удовольствие с gulp`ом
Тут то и понадобятся навыки работы с консолькой
Понимание глобального и локального нахождения плагинов и не только
Установишь node.js, выберешь себе консольку по-красивее и по-краше, прочитаешь туториалы, просмотрешь видосы и ты уже спец по gulp - 12-15 дней макс

материал:
1) sass - sass-lang.com
2) sass-playground: www.sassmeister.com (поддерживает susy,breakpoint-sass)
3) susy - susy.oddbird.net (любые сетки, полный контроль)
4) bootstrap - dedushka.org (неплохие уроки по css), www.w3schools.com/bootstrap/default.asp (неплохие уроки по css и js бутстрапа)
5) gulp - https://www.youtube.com/watch?v=9zwwmjGz1Vs&list=P... (неплохие уроки по gulp)

Ты все еще хочешь стать фронтенщиком? :)