P
P
PaveDUrov2016-06-01 16:25:06
Sass
PaveDUrov, 2016-06-01 16:25:06

How do I generate css relative to scss file?

When generating css it creates unnecessary nesting inside the destination folder, here is my 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']);
});

Answer the question

In order to leave comments, you need to log in

2 answer(s)
G
Georgy Eremeev, 2016-06-02
@GogElf

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');
    }))
});

According to the code dir[0] = **/type.account/, and dir[1] there will be nested folders (but I'm not sure if they are necessary). And it should turn out like this: path.dirname(file.path) = /path/type.account/scss/sub/ ; path.join(dir[0], 'css', dir[1]) = /path/type.account/css/sub/

P
PaveDUrov, 2016-06-01
@PaveDUrov

.pipe(flatten({ includeParents: 0} ))
I put -1 for flatten it makes one tab closer, but adds nesting in the generated file((

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question