cssTasks in Sage's gulpfile.js

sage
1

Hello,

I tried to simplify cssTasks from Sage’s gulpfile.js to use it in a different project. I thought Sage’s gulp setup would later allow me to extend and add tasks easily, when needed. I wanted to ‘extract’ only sass() task, so I came up with:

// ## Globals
var $ = require('gulp-load-plugins')();
var gulp = require('gulp');
var lazypipe = require('lazypipe');
var merge = require('merge-stream');

// asset-builder
var manifest = require('asset-builder')('manifest.json');

var cssTasks = function(filename) {
    return lazypipe()
        .pipe(function() {
            return $.sass({
                    outputStyle: 'nested',
                    precision: 10
                });
        })();
};

gulp.task('styles', function() {
    var merged = merge();
    manifest.forEachDependency('css', function(dep) {
       var cssTasksInstance = cssTasks(dep.name);
        merged.add(gulp.src(dep.globs)
            .pipe(cssTasksInstance));
    });
    return merged;
});

gulp.task('default', ['styles']);

My manifest.json is very simple:

{
  "dependencies": {
    "style.css": {
      "files": [
        "style.scss"
      ]
    }
  },
  "paths": {
    "source": "custom-sass/",
    "dist": "dist/"
  }
}

Unfortunately, running the ‘default’ task does not produce any output nor any errors. It completes without any results. I’m only starting with gulp and would really appreciate your advice. I must have made a mistake that I cannot find myself.

Hope to hear from you, thanks!

2

Well,

It was an oversight. I’ve never told gulp to output anything. This does the job:

var outputFiles = function() {
    return lazypipe()
        .pipe(gulp.dest, 'dist/')();
}

gulp.task('styles', function() {
    var merged = merge();
    manifest.forEachDependency('css', function(dep) {
       var cssTasksInstance = cssTasks(dep.name);
        merged.add(gulp.src(dep.globs)
            .pipe(cssTasksInstance));
    });
    return merged
        .pipe(outputFiles())
});

Sorry for trouble:)