Search code examples
sassgulpgulp-sass

Gulp sass output error


Given this gulpfile.js:

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    sourcemaps = require("gulp-sourcemaps"),
    autoprefixer = require("gulp-autoprefixer"),
    input = "./sass/*.scss",
    output = "./assets/style.css";

gulp.task("sass", function() {
    return gulp
        .src(sassInput)
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on("error", sass.logError))
        .pipe(sourcemaps.write())
        .pipe(autoprefixer())
        .pipe(gulp.dest(output))
        .resume();
});
gulp.task("watch", function() {
    return (gulp
            //watch input folder for change and then run 'sass' task
            .watch(input, ["sass"])
            .on("change", function(e) {
                console.log(
                    "file" + e.path + " was " + e.type + ", running tasks..."
                );
            }) );
});

I'm getting the following error --

Error: EEXIST: file already exists, mkdir './assets/style.css'

From what I've found around the web, it seems like gulp is treating the 'style.css' portion of that output folder as a directory itself, or something weird like that, but I can't really figure it out.


Solution

  • There is a tool called gulp-rename built specifically for this purpose. Here's the snippet that I added to make it work properly after adding the npm package.

    var gulp = require("gulp");
         .
         .
         .
    var rename = require("gulp-rename")
    
    input = "./sass/*.scss",
    output = "./assets/";
    
    gulp.task("sass", function() {
        return gulp
            .src(sassInput)
                 .
                 .
                 .
            .pipe(rename("styles.css.liquid"))
            .resume();
    });