CODEWITHSUNDEEP
csssassgulpgulp-sass
Arizona2014
Arizona2014

Reputation: 1347

Gulp sass different folders into one CSS file

I know that GULP-SASS should be trivial and easy, but if we can complicate the things why no to right ?

Well it seems that the project I work has a "particular" structure and I must get used with it. It is like this :

-static
  -app
    -components
      -component1
        -styles
          -component1.scss
      -component2
        -styles
          -component2.scss
    ...

On the same level with app I wave a subproject ... lets call it web :

-static
  -web
    -res
      -static
        -app
           -components
              -component3
                -style
                   -component3.scss

Now comes the fun part : how the hack can I create one single CSS file from this mess ? I tried this without any luck :

// Setting up the sass task
gulp.task('sass',  function (){
// Taking the path from the above object
    var sassApp = gulp.src(paths.styles.filesApp)
    // Sass options - make the output compressed and add the source map
    // Also pull the include path from the paths object
    .pipe(sass({
        outputStyle: 'compact', //compressed
        //sourceComments: 'map',
        includePaths : [paths.styles.srcApp]
    }))
    // If there is an error, don't stop compiling but use the custom displayError function
    .on('error', function(err){
        displayError(err);
    })
    // Pass the compiled sass through the prefixer with defined 
    .pipe(prefix(
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
    ))
    // Funally put the compiled sass into a css file
    .pipe(gulp.dest(paths.styles.dest));

    var sassWeb = gulp.src(paths.styles.filesWeb)
    // Sass options - make the output compressed and add the source map
    // Also pull the include path from the paths object
    .pipe(sass({
        outputStyle: 'compact',
        //sourceComments: 'map',
        includePaths : [paths.styles.srcWeb]
    }))
    // If there is an error, don't stop compiling but use the custom displayError function
    .on('error', function(err){
        displayError(err);
    })
    // Pass the compiled sass through the prefixer with defined
    .pipe(prefix(
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
    ))
    // Funally put the compiled sass into a css file
    .pipe(gulp.dest(paths.styles.dest));

    return
        gulpMerge(sassApp, sassWeb)
        .pipe(concat('all-css.css'))
        .pipe(gulp.dest(paths.styles.dest));
});

Upvotes: 0

Views: 1893

Answers (1)

Derek Bess
Derek Bess

Reputation: 222

This is how I setup my gulp file for my CSS.

I have multiple destinations that I use in my projects but this should help point you in the right direction.

You can also use SassGlob to glob in all scss / sass / css files from a main directory.

gulp.task('scss', function() {

    return gulp.src('src/sass/styles.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sassGlob())
        .pipe(sass({
            compass: false,
            includePaths: [
                './bower_components/susy/sass',
                './bower_components/susy/lib',
                './bower_components/susy/sass/susy',
                './bower_components/breakpoint-sass/stylesheets',
                require('node-bourbon').includePaths
            ],
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(prefix())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('dist/assets/css'))
        .pipe(gulp.dest('assets/css'))
        .pipe(reload({
            stream: true
        }));
});

Upvotes: 2

Related Questions