Как сделать чтобы из двух scss файла, преобразовать на два отдельных css файл?

Question

[Qairat]

Вот мой gulp код, в данный момент отрабатывает main.scss файл в main.css.

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync').create(),
    sassPath = ('./src/style/scss/main.scss'),
    cssPath = ('./public/style/css'),
    jsPath = ('./public/js/main.js'),
gulp.task('styles', function () {
    gulp.src(sassPath)
        .pipe(sass())
        .pipe(gulp.dest(cssPath))
        .pipe(browserSync.reload({ stream: true }));
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './public'
        }
    });

    gulp.watch('./src/style/scss/*.scss', ['styles']);
    gulp.watch('./public/**/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['styles','serve']);

и я включаю в проект только main.css.

Теперь я хочу подключить media.css.
Но не могу чтобы туда конвертовался media.scss.
Я сделал следующее:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync').create(),
    sassPath = ('./src/style/scss/main.scss'),
    cssPath = ('./public/style/css'),
    jsPath = ('./public/js/main.js'),
    mediaSassPath = ('./src/style/scss/_media.scss'),
    mediaCssPath = ('./public/style/css/media.css');
gulp.task('styles', function () {
    gulp.src(sassPath)
        .pipe(sass())
        .pipe(gulp.dest(cssPath))
        .pipe(browserSync.reload({ stream: true }));
});

gulp.task('styles2', function () {
    gulp.src(mediaSassPath)
        .pipe(sass())
        .pipe(gulp.dest(mediaCssPath))
        .pipe(browserSync.reload({ stream: true }));
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './public'
        }
    });

    gulp.watch('./src/style/scss/*.scss', ['styles']);
    gulp.watch('./src/style/scss/media.scss', ['styles2']);
    gulp.watch('./public/**/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['styles','styles2', 'serve']);

Но не работает.
Как это реализовать?

Comments

[Anton Filippov]

так у вас первый styles включает в себя второй

[Сергей delphinpro]

gulp.src('path/to/files/**/*.sass')

Answer 1

[Edward]

Просто измените строку
sassPath = ('./src/style/scss/main.scss');

на

sassPath = ('./src/style/scss/*.scss');  // Компилируем все файлы с расширением scss. Имена файлов, которые не должны компилироваться, должны начинаться с подчеркивания ( _ ). Тогда компилятор будет их игнорировать.

или

sassPath = ('./src/style/scss/{main,media}.scss');  // Компилируем только указанные файлы scss

Таск styles2 уберите, он лишний.

Comments

[Александр Погребной]

Ваш ответ помог решить мою проблему с разделением файлов, спасибо!