CODEWITHSUNDEEP
sasslessgulp
Dancer
Dancer

Reputation: 17681

Setup Gulpfile to compile LESS and SASS files

I wonder if anyone could point me in the right direction with the following:

I am trying to extend a Less constructed Bootsrap theme with SASS files(client requirement) - the idea is that over time the theme module files will be converted into Less - but for swiftness this is how i need to structure to begin with. I'm new to Gulp and previously a Grunt man.

The structure of my site is as follows -

enter image description here

I'm struggling with how to create the gulp file to compile both the Less Files and SASS files - So far I've got the following - 

elixir(function (mix) {
    mix
        .sass(?),
        .less(),

Can anyone point me in the correct direction please?

Upvotes: 0

Views: 355

Answers (1)

avcajaraville
avcajaraville

Reputation: 9084

Due to how gulp works, thats not possible.

Think about as streams. You pass data through pipes, each pipe will be processed and passed to the next one.

So, how will this apply to your case ? Answer: it wont.

Imagine, you get your sass files, compile them into css and now, what ?

You cant do that !

So, some alternatives:

  • You create two different tasks. Then you run them async or sync, up to your needs. For that, create another task that call this two tasks.

  • Or you create a task that run both compilers. Again, you can do this sync or async. Depends on your needs.

Bonus (proposed solution using promises):

var Q = require( 'q' );

gulp.task( 'compile', function ( cb ) {
  var lessDefer = Q.defer(),
      sassDefer = Q.defer(),
      deferArray = [ lessDefer, sassDefer ];
  gulp.src( lessSrc )
      .pipe( less( settings ) )
      .on( 'error', function( err ){
        lessDefer.reject( err );
      })
      .pipe( gulp.dest( lessDst ) )
      .on( 'end', function() {
        lessDefer.resolve();
      });
  gulp.src( sassSrc )
      .pipe( sass( settings ) )
      .on( 'error', function( err ){
        sassDefer.reject( err );
      })
      .pipe( gulp.dest( sassDst ) )
      .on( 'end', function() {
        sassDefer.resolve();
      });
  Q.all( deferArray )
    .done( function () {
      // All good, notify task end
      cb();
    })
    .catch( function( err ) {
      // Deal with error
      cb( err );
    });
});

Upvotes: 1

Related Questions