Как правильно написать задачу для Gulp, чтобы файл собирался в один?

Question

[givrzn]

Собираю Gulp для проекта.
Запарка создалась на самом простом месте.

gulp.task('sass', function () {
	return gulp.src('assets/sass/**/*.scss')
	    .pipe(sass().on('error', sass.logError))
		.pipe(gulp.dest('assets/css'));
});

Простая задача для gulp-sass.
А мне нужно вот что.
Файлы должны собираться в один файл.
А потом еще одна задача для минифицирования.
При этом, не должно быть никакого мусора.
То есть, никаких отдельных css файлов.

Answer 1

[Егор Живагин]

Делаешь какой нибудь файл app.sass , где

@import 'first.sass';
@import '../second.sass';
...

Короче, включаешь в него так всё, что тебе нужно. Вот этот файл и конвертируешь gulp-ом в css

Comments

[iBird Rose]

плохой метод. когда такой файл разрастется - компиляцию будешь ждать секунд 10 после каждого внесения изменений.

[Егор Живагин]

iBird Rose: у меня в него 30 файлов собирается. Нормально, 2 секунды максимум

[Егор Живагин]

iBird Rose: это при том, что есть и вложенные файлы

[alex]

iBird Rose: iBird Rose: чем ваш пример лучше? вы при любом изменении тоже конкатинируете все .scss(даже которые не были изменены) и компилируете в один файл.

[iBird Rose]

potapchino: ну я не знаю как будет юзать мой пример автор - но код который я написал - я использую только для билда - в watch я их не конкатенирую и не собираю.

[givrzn]

iBird Rose: А как они подключаются в dev (watch)? кучей отдельных файлов?

[iBird Rose]

givrzn: есть шаблон с хедером, который рекваирится во все страницы. туда подключается через link. потом после билда через htmlreplace все полотно link заменяется на один link. возмжно кто-то скажет что такой способ плох - но для меня он хорош тем что любое изменение стилей - инжектится в браузер через 0,3 секунды.

Answer 2

[iBird Rose]

var concat 		= require('gulp-concat');
var minifyCSS 		= require('gulp-minify-css');

var SCSSfiles = ['assets/sass/**/*.scss', '!assets/sass/reset.scss', '!assets/sass/all.scss'];
var resetCSS = ['assets/sass/reset.scss'];
var allCSS = ['assets/sass/all.scss'];
var resetFirst = resetCSS.concat(allCSS);
var concatFiles = resetFirst.concat(SCSSfiles);
gulp.task('sass', function() {
	return gulp.src(concatFiles)
	.pipe(concat('styles.min.scss'))
        .pipe(sass().on('error', sass.logError))
	.pipe(minifyCSS())
	.pipe(gulp.dest('assets/css'));
});

Comments

[givrzn]

А как сделать, чтобы reset.scss подключился первым?

[iBird Rose]

givrzn: исправил ответ. тока я сделал для последнего. дальше разберешься

[iBird Rose]

givrzn: сделал и для reset

[givrzn]

iBird Rose: вот где ошибка?

var scss_files = ['!app/styles/**/_*.scss', 'app/styles/_all.scss', 'app/styles/**/*.scss',];

gulp.task('sass', function () {
	return gulp.src(scss_files)
		.pipe(concat('styles.min.scss'))
	    .pipe(sass().on('error', sass.logError))
		.pipe(gulp.dest('dest/css'));
});

Мне нужно сделать такой порядок
1) резет
2) алл
3) все остальные

[iBird Rose]

givrzn: вытащи reset и all в отдельные переменные. и через concat объеденяй

[iBird Rose]

givrzn: обновил ответ