CODEWITHSUNDEEP
sasswebpackgulp-sassnode-sass
Ishan jain
Ishan jain

Reputation: 169

Gulp sass unable to override already existing file

Gulp sass/gulp watch command is unable to override the already existing/generated .css file. So when there is no generated css file in the folder, the command works fine. But, if the file exists on the folder I am getting below error.

[12:17:39] Error: EPERM: operation not permitted, open 'C:\My folder\project\components\site-products\demo\app\css\style.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']);
});

Not sure its relevant but I am not using gulp-compass. I am using node-sass instead. Thanks in advance for help.

Upvotes: 1

Views: 1202

Answers (3)

Eddaye
Eddaye

Reputation: 19

I got the same and resolved by using gulp cache control.

I don't understand why, but it works!

For you, it would be something like that:

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']);
});

Upvotes: 1

Ishan jain
Ishan jain

Reputation: 169

Resolved it finally, it was because webpack was locking files. Used gulp-chmod to bypass it :)

Here is the final script:

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']);
});

Upvotes: 1

Özlem
Özlem

Reputation: 79

You can use the clean task:

// 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');
});

Upvotes: 0

Related Questions