Gulp sass no puede anular el archivo ya existente: sass, webpack, gulp-sass, node-sass

El comando Gulp sass / gulp watch no puedeanular el archivo .css ya existente / generado. Entonces, cuando no hay un archivo css generado en la carpeta, el comando funciona bien. Pero, si el archivo existe en la carpeta, obtengo un error inferior.

[12:17:39] Error: EPERM: operación no permitida, abra "C: My folderprojectcomponentssite-productsdemoappcssstyle.css"

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

gulp.task("sass", function () {
return gulp.src("./demo/app/scss/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./demo/app/css"));
});

gulp.task("sass:watch", function () {
gulp.watch("./demo/app/scss/**/*.scss", ["sass"]);
});

No estoy seguro de que sea relevante, pero no estoy usando gulp-compass. Estoy usando node-sass en su lugar. Gracias de antemano por la ayuda.

Respuestas

Resuelto finalmente, fue porque el webpack estaba bloqueando archivos. Utiliza gulp-chmod para evitarlo :)

Aquí está el guión final:

var gulp = require("gulp");
var sass = require("gulp-sass");
var chmod = require("gulp-chmod");

gulp.task("sass", function () {
return gulp.src("./demo/app/scss/**/*.scss")
.pipe(chmod(0o755))
.pipe(sass({outputStyle: "compressed"}).on("error", sass.logError))
.pipe(gulp.dest("./dist/demo/css"));
});


gulp.task("sass:watch", function () {
gulp.watch("./demo/app/scss/**/*.scss", ["sass"]);
});

Conseguí lo mismo y resolví usando el control de caché Gulp.

No entiendo por qué, pero funciona!

Para ti, sería algo así:

var cache = require("gulp-cached");

gulp.task("cache:docsource", function(){
return gulp.src("./demo/app/**/*.*").pipe(cache("cacheDocSource"));
});

gulp.task("sass", function () {
return gulp.src("./demo/app/scss/**/*.scss")
.pipe(cache("cacheDocSource"))
.pipe(sass({outputStyle: "compressed"}).on("error", sass.logError))
.pipe(gulp.dest("./dist/demo/css"));
});

gulp.task("sass:watch", ["cache:docsource"], function () {
gulp.watch("./demo/app/scss/**/*.scss", ["sass"]);
});

Puedes usar la tarea limpia:

// Path
var paths = {
scss: {
input: "dev/assets/scss/**/*.{scss,sass}",
output: "public/assets/css"
}
};

// SCSS
gulp.task("scss", function() {
return sass(paths.scss.input)
.pipe(autoprefixer("last 2 version"))
.pipe(cssnano())
.pipe(gulp.dest(paths.scss.output))
.pipe(browserSync.reload({stream: true}));
});

// Clean
gulp.task("clean", function() {
return del(["public/**/*"]);
});


// Default
gulp.task("default", ["clean"], function() {
gulp.start("scss");
});