После статьи на Хабре, решил собрать свой простой gulpfile, для html и css.

Как устанавливать node я вам не буду рассказывать, об этом уже много где сказано. И найти информацию об этом вас не затруднит.

Перейду к самому главному. Мой “рабочий” проект, для сборки простенького сайта лежит здесь.

А теперь, чуть чуть по подробнее :-)

Основная задача этого gulpfile собирать html из jade шаблонов и css из stylus. Ну и разумеется обычные html и css тоже должно уметь. Также оптимизация всех картинок. Т.к. на js я пока толком не умею ничего делать, то особого внимания я ему не прикладываю, поэтому с скриптами у меня практически ничего не делается, кроме “склейки” и минификации.

// Собираем Stylus
gulp.task('stylus', function() {
    gulp.src('assets/styles/**/*.styl')
        .pipe(stylus()) // собираем stylus
    .on('error', console.log) // Если есть ошибки, выводим и продолжаем
    .pipe(autoprefixer("last 1 version", "> 1%", "ie 8", "ie 7"))
    .pipe(gulp.dest('public/css/')) // записываем css
    .pipe(livereload(server)); // даем команду на перезагрузку css
});

Стили прогоняются еще через autoprefixer, который расставляет нужные префиксы по условию "last 1 version", "> 1%", "ie 8", "ie 7".

// Собираем html из Jade
gulp.task('jade', function() {
    gulp.src(['assets/template/*.jade', '!assets/template/_*.jade'])
        .pipe(jade({
            pretty: true
        }))  // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
        .on('error', console.log) // Если есть ошибки, выводим и продолжаем
    .pipe(gulp.dest('public/')) // Записываем собранные файлы
    .pipe(htmlhint({
        "tag-pair": true,
        "style-disabled": true,
        "img-alt-require": true,
        "tagname-lowercase": true,
        "src-not-empty": true,
        "id-unique": true,
        "spec-char-escape": true
    }))
    .pipe(htmlhint.reporter())
    .pipe(gulp.dest('public/'))
    .pipe(livereload(server)); // даем команду на перезагрузку страницы
});

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

Картинки оптимизируются задачей:

// Копируем и минимизируем изображения
gulp.task('images', function() {
    gulp.src(['assets/img/**/*', '!assets/img/**/*.svg'])
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(livereload(server))
        .pipe(gulp.dest('public/img'))
});

Под виндой у вас возникнут проблемы с этой задачей, решается она легко, нужно в package.json добавить "jpegtran-bin": "~0.2.3". И все должно заработать. Во всяком случае гуглится всё просто и быстро.

Так же там стоит cache .pipe(cache(imagemin, это для того чтобы не оптимизировать все картинки заново, а брать только новые, только добавленные. Ну, конечно, если я ничего не путаю :-)

Svg я тоже прогоняю через svgmin. Все весьма не плохо “оптимизируется”. Хотел еще поставить gulp-rsvg, но с виндой тут возникают проблемы. А может я что-то не то делаю?

Для сборки конечного проекта у меня используется задача build, она практически во всем повторяет задачу watch. Там можно многое убавить, не расписывая все повторно, но пока что я не хочу этого делать.

Пока что у меня с этим Gulp возникло несколько вопросов, почти те же самые, что некогда с grunt. А именно:

1. Мне не совсем понятно, как копировать обычные файлы, т.е. которые не должно подвергаться сборке, я конечно решил вроде этот вопрос gulp.src('assets/static/**/*').pipe(gulp.dest('public/'));, но все равно есть сомнения. Тут еще есть команда copy, но я мало что о ней нашел :-)
2. У меня не запускается svgmin при watch, как и при build) И я не могу понять почему. Отдельно, задача svgmin запускается.
3. При изменении одного файла, будь то html или css, задача сразу прогоняет через себя все файлы, как бы так сделать, чтобы только изменяемый файл обновлялся?
4. И самое главное. Научите меня обновлять всё, что в package.json :-) Что то типа npm update, но так, чтобы версии актуализировались.
5. Было еще что-то, но я как всегда забыл, возможно допишу, как вспомню.

Да и вообще, хотелось бы посмотреть на чужие gulp конфиги) Особенно на простые, по типу моего, для простых задач.