How to source files in parent directories

Question

I'm trying to combine multiple scss files into one, similar to Gulp: How to create a task that compiles multiple SASS files?; however one of my files is above my gulpfile:

/project_root/
    fe/
        common/
            app/src/main/styles/main.scss
            gulpfile.js
        module/src/foo/styles/main.scss

My gulpfile looks like this:

gulp.task('styles', function() {
    return gulp
        .src(
            [
                './app/src/**/main.scss',    // included
                '../module/src/**/main.scss' // NOT included
            ],
            { base: '.'} // this doesn't seem to matter
        )
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        // …
        .pipe(rename('app.css'))
        .pipe(gulp.dest('../build/'));
});

I do basically the same thing with my js (*.js instead of main.scss), and it works just fine :/

Update: I just noticed that, when I remove the rename from above, the second main.scss does get processed and a main.css is created in the same directory instead of the dest directory.

Update: I tried making the source path start at their common ancestor '../{common,module}/**/main.scss' (which significantly impacted performance), and now I get 2 copies of the 2nd source file.

I recommend importing your files into a single file, the processing that single file instead. Would this work for your needs here? If you don't want them included like that, I'd process them separately then use another step to concatenate the outputted CSS files. — Steve Adams, Apr 15 '15 at 18:18
I just tried concatenating the 2 main.scss files, but it doesn't update the `import` paths. — Jakob Jingleheimer, Apr 15 '15 at 19:21

Steve Adams · Answer 1 · 2015-04-15T20:34:08.883

It doesn't appear that gulp-sass concatenates files like you expect.

You could combine all of your .scss files into one yourself with a single file which imports all dependencies:

# app.scss
@import 'main.scss';
@import '../../../module/src/**/*.scss';

Then process it all with your current task (minus renaming it):

gulp.task('styles', function() {
    return gulp
        .src('./app/src/**/site.scss')
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        // …
        .pipe(gulp.dest('../build/'));
});

This will make sass automatically combine those two files into one. However it makes it sort of awkward to manage what I assume are dependencies under the modules directory, from within your own source code.

Instead you could use gulp-concat with your current task like this:

Install it first with npm install gulp-concat --save, then alter your task like so:

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

gulp.task('styles', function() {
    return gulp
        .src(
            [
                './app/src/**/main.scss',    // included
                '../module/src/**/main.scss' // NOT included
            ],
            { base: '.'} // this doesn't seem to matter
        )
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        .pipe(gulp.dest('../build/css'))
        .pipe(concat('app.css'))
        .pipe(gulp.dest('../build/'));
});

This should accomplish what you're trying to do with rename('app.css'). Rename won't work there since gulp-sass is producing multiple files. This method appears nicer to me since you can manage your style dependencies from the gulp task instead of importing them into your source code's styles.

I would prefer the 2nd solution, but it doesn't work: Instead of combining the 2 main.scss files, it just repeats the first file twice in the final output (assuming you meant `.pipe(concat('app.css')`). — Jakob Jingleheimer, Apr 15 '15 at 19:13
One good thing came of this: I added the concat and commented out everything until the dist and verified that gulp is indeed finding the 2nd file. — Jakob Jingleheimer, Apr 15 '15 at 19:18
I've updated my answer - see the part where the sass output is given a dest step, then concatenated before the final dest. The dest step I've added could put the non-concatenated files anywhere, really, but I believe they need to be put somewhere before concat will work. — Steve Adams, Apr 15 '15 at 20:34
No dice: Now it creates: `/project_root/fe/build/css/app/src/main/styles/main.css` and `/project_root/fe/build/module/src/foo/styles/main.css` (both files are actually just the processed 1st main.scss), and a `build/app.css` containing the same duplicated 1st main.scss output. I think part of the problem might be the `../` in the source path of the 2nd scss file, causing them to be in different directories, so concat doesn't know what to do. — Jakob Jingleheimer, Apr 15 '15 at 21:21

How to source files in parent directories

1 Answers1