Как решить проблему переопределения стилей после gulp-concat?

Question

[Eels]

Имеем директорию CSS файлов.

--/css
    --/base
        reset.css
        base.css
    --/layout
        layout.css
    --/module
        module.css

Во время работы над проектом следим за изменениями в этих файлах и по событию запускаем задачу. Которая из всех директорий собирает файлы, расставляет им префиксы, сжимает и записывает в единственный файл /css/style.css

gulp.task('styles', function() {
	return gulp.src(paths.styles)
		.pipe(concat('style.css'))
		.pipe(prefix('last 1 version', '> 1%', 'ie 8', 'ie 7'))
		.pipe(csso())
		.pipe(gulp.dest('./tmp/css'))
		.pipe(connect.reload())
});

Проблема в том, что reset.css оказывается ниже base.css, из-за чего происходит переопределение стилей. Так может произойти и с другими файлами. Можем ли мы как-то контролировать очередь объединения файлов? За исключением осознанного переименования. :)

Answer 1

[Сергей Протько]

используйте less/scss/stylus. Просто, универсально (нужно указать только точку входа, а дальше все инклуды разруливаются уже выбранным препроцессором), куча возможностей, упрощает процесс верстки... Без препроцессоров уже никуда...

Comments

[Eels]

Т.е. плагин препроцессора сам запустит инклуды, а на выходе мы получаем единый файл стилей?

[Евгений Попов]

Да.

[Eels]

Всем большое спасибо. Значит мой вопрос просто от не знания!

Answer 2

[Евгений Попов]

stackoverflow.com/questions/21961142/gulp-concat-s...
вопрос похожий на ваш предлагают либо называть файлы определенным образом с порядковым номером, либо в массиве ссылок на файлы прописывать "точные" имена/прямые ссылки:
[
'/path/to/app.js',
'/path/to/mymodule/mymodule.js',
'/path/to/mymodule/mymodule/*.js'
]

Comments

[Eels]

Не вариант. Нужно что-то универсальное. Чтобы не танцевать с бубном при создании нового файла. :(

[Евгений Попов]

Не очень понятно как именно по вашему "система" должна понимать в каком порядке должны склеиваться файлы, если вы ей на это прямо не указываете. Почему кроме логики разработчика reset должен идти раньше чем base?

[Евгений Попов]

Как вариант который я бы предположил давать на вход в gulp не директорию, а файл "конфиг" в котором идет импорт исходников в необходимом вам порядке.

[Eels]

Я с вами согласен, что нужно прямо указывать на очередность обработки файлов. Вопрос в том, как именно это делать. Переименование файлов меня не устраивает, как и постоянные правки gulpfile.js. Возможно есть инструмент(плагин), который сможет отработать @import в общем css файле, а затем все сохранить в виде нового. А может я сам придумал себе проблему...

[Eels]

Ага. Не обновил страницу перед отправкой. :)

[Евгений Попов]

погодите а gulp не умеет склеивать @import в один файл? Если нет, то это совсем не есть гуд и в таком случае как и советовали выше я бы использовал less/scss/stylus кстати при сборке в css исходников на на том же less происходит объединение в один файл всех @import возможно его и стоит завести как конфиг (config.less) и давать на вход в gulp, хотя тогда зачем gulp в таком случае он выглядит лишним звеном по крайней мере для css. Так же не стоит забывать, что и для js имеет значение, то в каком порядке они подключаются.