Когда-то давно у меня уже был подобный гайд как использовать Yeoman для верстки. С того момента прошло уже достаточно много времени, да и даже тогда чистой версткой я уже давным давно не занимался, и более интересным было React+webpack и SPA.

Но тут внезапно понадобилось сделать портфолио (хоть какое нибудь), ну и в том числе чистую верстку. Сначала хотел я приспособить вебпак для этого, но вебпак это не таск-раннер, а более решение для SPA, на выходе которой получается бандл. Начинались проблемы уже с того что dev-server не хотел рефрешить странички с html статикой, все конечно можно было решить через костыли (я уже даже приделал к webpack еще и browser sync знакомый мне по сборке Yeoman), но следующая проблема css. Мне нужна scss реализация и перекомпиляция в стандартный css. Вебпак все это делает без проблем, но с одной оговоркой - результат помещается в общий JS бандл. Да, есть плагины, можно экстрактить css код во внешний файл, но подумав зачем же такой изврат, если можно сделать это нативно и без лишних костылей. И тут я вспомнил про Gulp.

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

• gulp
• browser-sync
• sass
• gulp-postcss
• autoprefixer
• cssnano

Более никаких манипуляций с файлами проекта пока не нужна, и эта сборка будет включена в каждый проект который я собираюсь выложить на github.

Конфиг gulp:

onst gulp = require('gulp'),
      browserSync = require('browser-sync').create(),
      sass  = require('gulp-sass'),
      postcss = require('gulp-postcss'),
      autoprefixer = require('autoprefixer'),
      cssnano = require('cssnano'),
      sourcemaps = require('gulp-sourcemaps');

const paths = {
	
    styles: {
        src: "src/scss/*.scss",
        dst: "src/css",
        html: "src/*.html"
    }
	
};

function style() {
    return (
        gulp
            .src(paths.styles.src)
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(postcss([autoprefixer(), cssnano()]))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(paths.styles.dst))
            .pipe(browserSync.stream())
	
    );
	
};
exports.style = style;

	
function reload() {
	
    browserSync.reload();
	
}

function watch(){
    browserSync.init({
        server: {
            baseDir: "./src"
        }
    });
    gulp.watch(paths.styles.src, style);
    gulp.watch(paths.styles.html, reload);
};
exports.watch = watch;

В секцию scripts добавляю что по команде yarn dev выполнялось бы gulp watch. Так привычнее, потому что для проектов SPA у меня был именно такой вызов дев-сервера. В результате получилась неплохая среда для верстки, возможно в будущем придется прикрутить что-то для обработки JS (ну если придется) конечно можно было обойтись и ES5, но к ES6 я уже привык, так что придется тогда и babel прикручивать для совместимости.