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.
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();
});