Qairat
@Qairat
frontend developer, angular 2+

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

Вот мой 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']);

Но не работает.
Как это реализовать?
  • Вопрос задан
  • 347 просмотров
Решения вопроса 1
edalis
@edalis
HTML, CSS, JS, Node.js
Просто измените строку
sassPath = ('./src/style/scss/main.scss');

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


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


Таск styles2 уберите, он лишний.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы