Как организовать сборку для разных страниц со своими стилями?

Question

[MeylisDay]

Предположим у меня есть две страницы, на которых нужно организовать подключение разных файлов стилей.
На входе, например, файлы style.scss и style-main.scss (каждый подключается к своей странице) и на выходе получились их соответствующие минифицированные версии. Пока сборка проходит в одном файле, и на выходе получается один минифицированный файл.

Вот текущий код таска

gulp.task("css:build", function () {
    return gulp.src(path.src.css)
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ["last 5 versions"],
            cascade: true
        }))
        .pipe(removeComments())
        .pipe(cssbeautify())
        .pipe(gulp.dest(path.build.css))
        .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(rename("style.min.css"))
        .pipe(gulp.dest(path.build.css))
        .pipe(webserver.reload({stream: true}));
});

Answer 1

[motr]

Если я правильно понял вопрос, то вы можете в gulp.src передавать массив файлов. В вашем случае, как-то так:

gulp.task('css:build', function () {
  gulp.src(['./src/scss/style.scss', './src/scss/style-main.scss'])
/* или так return gulp.src('./src/sсss/*.sсss') // "*" - означает, что будут браться и обрабатываться все файлы с расширением scss из этой дирректории */
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 5 versions'],
      cascade: true
    }))
    .pipe(removeComments())
    .pipe(cssbeautify())
    .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(path.build.css))
    .pipe(webserver.reload({stream: true}));
});

Comments

[MeylisDay]

Не работает. Так даже минифицированные файлы не создаются.

[motr]

MeylisDay, вообще должно работать! можно ещё проще сделать, используя селектор *, но покажите сначала ваш путь path.src.css. Я так понимаю, path - это объект с путями?

[motr]

И ещё, сразу внимание не обратил, зачем вы дважды выполняете .pipe(gulp.dest(path.build.css))?

gulp.task("css:build", function () {
    return gulp.src(path.src.css)
        .pipe(plumber()) //проверяете на ошибки
        .pipe(sass()) //запускаете компилятор сасс
        .pipe(autoprefixer({ //добавляете префиксы
            browsers: ["last 5 versions"],
            cascade: true
        }))
        .pipe(removeComments()) //удаляете комменты
        .pipe(cssbeautify()) // приводите в человеческий вид
        .pipe(gulp.dest(path.build.css)) //выплёвываете обработанный файл
        .pipe(cssnano({ //затем запускаете минификатор файла, НО он будет обращатся к файлу из path.src.css а не path.build.css
            zindex: false,
            discardComments: {
                removeAll: true  // и опять удаляете комменты
            }
        }))
        .pipe(rename("style.min.css"))
        .pipe(gulp.dest('./dist/css'))
        .pipe(webserver.reload({stream: true}));
});

[MeylisDay]

motr, проблема решилась почти сама собой, использую дважды потому что мне кажется, полезно иметь две версии файлов, минифицированную и обычную. Путь был такой src/assets/sass/*.scss, но сначала ни в какую не хотело работать, а потом случилась магия и заработало.

[motr]

MeylisDay, полезно иметь на этапе разработки! вам нужно просто разделить процесс на develop и production. Т.е. на этапе разработки вы будете иметь не минифицированные файлы, на продакшн уже получать обработанные и сжатые.

[MeylisDay]

motr, ну, это когда-нибудь, когда уровень подтяну и начну серьезно заниматься разработкой. Спасибо еще раз за помощь :)

[motr]

MeylisDay, я отредактировал свой ответ, как бы я сделал в вашем конфиге. Ещё можете взглянуть на мой конфиг галпфайл тут https://github.com/fedeveloperua/start может что-то полезое и для себя найдёте

[motr]

MeylisDay, да не за что:) обращайтесь! рад помочь, ну или совместно найти решение =)