Как мне сгенерировать css относительно scss файла?

Question

[PaveDUrov]

При генерации css создает ненужную вложенность внутри папки назначения, вот мой gulpfile:

var path = require("path");
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    rename = require("gulp-rename"),
    flatten = require('gulp-flatten');

gulp.task('sass', function () {
    return gulp.src('../www/local/**/sass/*.scss')
        .pipe(sass())
        .pipe(flatten({ includeParents: 0} ))
        .pipe( gulp.dest( function( file ) { return path.join(path.dirname(file.path), '../gulp/'); } ) );
});

gulp.task('watch', function () {
    gulp.watch('../www/local/**/sass/*.scss', ['sass']);
});

Comments

[Георгий Еремеев]

Опишите пожалуйста кратко структуру, и куда будет по структуре генерироваться готовый css.

[PaveDUrov]

prntscr.com/bb2opn - вот где находится галп файл
prntscr.com/bb2pbs - sass
prntscr.com/bb2pqr - в папке type.account должен генерить style.css в папку css, которая находиться на одном уровне с папкой sass в которой находиться style.scss
Но пути должны быть относительны так как таких папок как type.account много

[PaveDUrov]

var path = require("path");
var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require("gulp-rename"),
flatten = require('gulp-flatten'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util');

var onError = function (err) {
gutil.beep();
console.log(err);
};

gulp.task('sass', function () {
gulp.src('**/sass/*.scss')
.pipe(plumber({
errorHandler: onError
}))
.pipe(sass())
.pipe(flatten({ includeParents: 0} ))
.pipe( gulp.dest( function( file ) { return path.join(path.dirname(file.path), '../gulp/'); } ) )
});
gulp.task('watch', function () {
gulp.watch('**/sass/*.scss', ['sass']);

});

[PaveDUrov]

последняя версия галп файла

[PaveDUrov]

var path = require("path");
var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require("gulp-rename"),
flatten = require('gulp-flatten'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util');

var onError = function (err) {
gutil.beep();
console.log(err);
};

gulp.task('sass', function () {
gulp.src('**/sass/*.scss')
.pipe(plumber({
errorHandler: onError
}))
.pipe(sass())

.pipe( gulp.dest( function( file ) { return path.join(path.dirname(file.path), '../gulp/'); } ) )
});
gulp.task('watch', function () {
gulp.watch('**/sass/*.scss', ['sass']);

});

C вот таким галпфайлом генериться норм но с таким "багом"
prntscr.com/bb2wg3

[Георгий Еремеев]

PaveDUrov: сложная структура...

gulp.task('sass', function () {
	gulp.src('**/sass/*.scss')
		.pipe(plumber({errorHandler: onError}))
		.pipe(sass())
		.pipe(flatten({includeParents: 0}))
		.pipe(gulp.dest(function (file) {
			var dir = path.dirname(file.path).split('/scss')
			return dir[1] ? path.join(dir[0], 'css', dir[1]) : path.join(dir[0], 'css');
		}))
});

По коду dir[0] = **/type.account/, а dir[1] там будут вложенные папки (но я не уверен в их необходимости). И должно получится вот так: path.dirname(file.path) = /path/type.account/scss/sub/ ; path.join(dir[0], 'css', dir[1]) = /path/type.account/css/sub/

[PaveDUrov]

Боже мой!!!!!Надеюсь заработает, сейсас буду тестить много чего не понятно в десте , буду разбираться

[PaveDUrov]

ОООООООООО жесть рабоатет!!!!
Спасибо большое!!!!!

[PaveDUrov]

Буду сейсчам разбираться

Answer 1

[Георгий Еремеев]

gulp.task('sass', function () {
  gulp.src('**/sass/*.scss')
    .pipe(plumber({errorHandler: onError}))
    .pipe(sass())
    .pipe(flatten({includeParents: 0}))
    .pipe(gulp.dest(function (file) {
      var dir = path.dirname(file.path).split('/scss')
      return dir[1] ? path.join(dir[0], 'css', dir[1]) : path.join(dir[0], 'css');
    }))
});

По коду dir[0] = **/type.account/, а dir[1] там будут вложенные папки (но я не уверен в их необходимости). И должно получится вот так: path.dirname(file.path) = /path/type.account/scss/sub/ ; path.join(dir[0], 'css', dir[1]) = /path/type.account/css/sub/

Comments

[PaveDUrov]

убрал, флатен работает и без него , теперь вопрос, как лучше всего добавлять новые таски по css, например autoprefixer, создавать отдельный таск или "всововать" в таску sass, если "всовую в таск" то опять начинает выделываться
gulp.task('sass', function () {
return gulp.src('**/sass/*.scss')
.pipe(plumber({errorHandler: onError}))
.pipe(sass())
.pipe(autoprefixer())
.pipe(flatten({ includeParents: 0} ))
.pipe(gulp.dest(function (file) {
var dir = path.dirname(file.path).split('/scss');
return dir[1] ? path.join(dir[0], 'css', dir[1]) : path.join(dir[0], 'css');
}))
});

[PaveDUrov]

может можно сделать что бы автопрефиксер не создавал папок, а в том же сss и редактировал, ище сейчас такое решение

[PaveDUrov]

Как создать правельный flow заданий для gulp?

Answer 2

[PaveDUrov]

.pipe(flatten({ includeParents: 0} ))
ставлю -1 для flatten оно делает на вкладку ближе, но добавляет вложеность в сгенерином файле((