think123 think123 - 1 year ago 157
CSS Question

Gulp compile SASS into relative subfolder

If I have a file inside of

, how do I compile it to

This is my current code in

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
return gulp.src('components/**/sass/*.scss', {base: "./"})

gulp.task('default', function () {'components/**/sass/*.scss', ['sass']);

Answer Source

Rename each path replacing the "/sass" bit and it's extension via "gulp-rename" module.

I would recommend having the path globbing in a variable, the watch as a independent task, and the default task with both the "sass" and "watch" tasks.

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

var componentsGlob = './components/**/sass/*.scss';

gulp.task('sass', function() {
  return gulp.src(componentsGlob)
    .pipe(rename (function(path) {
      path.dirname = path.dirname.replace('/sass', '/styles');
      path.extname = ".css";

gulp.task('watch', function () {, ['sass']);

gulp.task('default', ['sass', 'watch']);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download