Gulp sass 无法覆盖已经存在的文件答案

【问题标题】：Gulp sass unable to override already existing fileGulp sass 无法覆盖已经存在的文件
【发布时间】：2017-10-03 13:24:34
【问题描述】：

Gulp sass/gulp watch 命令无法覆盖已经存在/生成的 .css 文件。因此，当文件夹中没有生成的 css 文件时，该命令可以正常工作。但是，如果该文件存在于文件夹中，则会出现以下错误。

[12:17:39] 错误：EPERM：不允许操作，打开 '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']);
});

不确定它是否相关，但我没有使用 gulp-compass。我正在使用 node-sass 代替。提前感谢您的帮助。

【问题讨论】：

标签： sass webpack gulp-sass node-sass

【解决方案1】：

我得到了同样的结果，并通过使用 gulp 缓存控制解决了。

我不明白为什么，但它有效！

对你来说，应该是这样的：

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

【讨论】：

【解决方案2】：

终于解决了，是因为 webpack 锁定了文件。使用 gulp-chmod 绕过它:)

这是最终的脚本：

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

【讨论】：

【解决方案3】：

你可以使用 clean 任务：

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

【讨论】：