@alexeeey_kuznetsov

Как организовать компиляцию scss, конкатенацию в один файл и обновления браузера для многостраничного сайта?

Здравствуйте!
Имею в проекте такую структуру папок.
5cec36752fe6c877042118.png
И такой gulp для главной страницы.
const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();


gulp.task('sass', function() {
	return gulp.src('./src/scss/main/*.scss')
	.pipe(sourcemaps.init())
	.pipe(sass())
	.pipe(concat('main.css'))
	.pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
	.pipe(sourcemaps.write())
	.pipe(gulp.dest('./public/css/main/'))
	.pipe(browserSync.stream());
});
gulp.task('serve', function() {
	browserSync.init({
		server: {
			baseDir: './public'
		}
	});
	gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
	gulp.watch('./public/*.html').on('change', browserSync.reload);
	gulp.watch('./public/js/*.js').on('change', browserSync.reload);
});

gulp.task('default', gulp.series('sass', 'serve'));

Вопрос в том, что у меня добавятся новые страницы в проект и под каждую необходим свой scss для media и основных стилей и я не понимаю как написать это более грамотно в gulpfile. Т.е. при создании страницы например about должен создаться файл в src->scss->about->about.scss к нему в этой же папке media.scss и они после прогонки в галпе должны соединиться в concat в отдельную папку в css файл в public->css->about->about.css. И свой js файл конечно же под каждую страницу.
Не понимаю как минимально записать в галпе, в лучшем случае одну задачу чтобы галп это всё делал.
Так как только начинаю юзать галп просто сделал бы несколько копий задачи sass под каждую страницу с явным указанием пути до файлов, но это много строк. И возможно есть способ сделать это более кратко и просто.
В gulp новичок - надеюсь на понимание)
Заранее спасибо за помощь!
  • Вопрос задан
  • 143 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы