Gulp-sass在保存部分时触发但不写入输出

46scxncf  于 2022-12-08  发布在  Gulp
关注(0)|答案(4)|浏览(153)

我使用gulp sass编译,前缀和缩小我的scss到css和min.css,我使用watch来启动编译,每次我保存文件,但突然gulp-sass停止写输出文件,只有当保存部分,一切工作正常,当我保存主要风格。scss
这是我的终端在两种情况下的SASS日志,无论是保存主文件还是部分scss文件。正如你所看到的,它两次都触发,但只有在保存主文件时,才会生成并保存输出。

[11:54:50] Starting 'sass'...
[11:54:51] Finished 'sass' after 886 ms
[11:54:52] Starting 'sass'...
[11:54:53] Finished 'sass' after 809 ms

Gulp是全局安装的,下面的Gulpfile.js一直工作到昨天。我试着改变了几次gulp.src的路径,但是没有成功。显然,我仍然可以编译保存main style.scss的所有内容,但是当你同时处理几个文件时,这真的很烦人。
另一个奇怪的事情是,试图改变文件路径来编译缩小版本会恢复到一个较旧的日期版本;我认为这可能是一个NPM缓存问题,但我对node/npm没有信心,我只是用它来编译SCSS和连接JS,仅此而已。
提前感谢所有能帮助我的人。

var themeurl = './';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
var watch = require('gulp-watch');
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () {
  return gulp.src(themeurl + '_sass/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 10 versions']
    }))
    .pipe(sourcemaps.write())   
    .pipe(gulp.dest(themeurl))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(themeurl));

});

gulp.task('scripts', function() {
    gulp.src('_js/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('assets/js'));
    return gulp.src(themeurl + 'assets/js/scripts.js')
        .pipe(uglify().on('error', function(e){
            console.log(e);
         }))
        .pipe(rename('scripts.min.js'))
        .pipe(gulp.dest(themeurl+'assets/js/'));    
});

gulp.task('watch', function () {
    gulp.watch(themeurl + '_sass/**/*.scss', gulp.series('sass') );
    gulp.watch(themeurl + '_js/*.js', gulp.series('scripts') );  
});
fafcakar

fafcakar1#

你的问题解决了吗?我也有同样的问题。
我的解决方法是如何编写watch任务。并且我必须在每次新编译之前删除css包

// old 
watch(`${paths.src}/sass/**/*.scss`, series(css, reload));
// workaround
watch(`${paths.src}/sass/*.scss`, series(delCSSbundle, css, reload));

结果是CSS包的内容在每次编译时都会更新,但包的日期/时间保持不变。

slhcrj9b

slhcrj9b2#

当您将style替换为*(如下面的代码块所示)时,*会告诉gulp在文件夹中搜索所有以.scss结尾的文件。

gulp.task('sass', function () {
  return gulp.src(themeurl + '_sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 10 versions']
    }))
    .pipe(sourcemaps.write())   
    .pipe(gulp.dest(themeurl))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(themeurl));

});
cu6pst1q

cu6pst1q3#

谢谢你Remco,我已经尝试过了,但不幸的是什么都没有改变。正如我在更新中所描述的,问题似乎与文件的日期/时间有关,而不是在编译:编译会用我所有的修改来更新,但日期/时间没有。

8i9zcol2

8i9zcol24#

面对类似的问题,gulp任务运行时没有错误,但只对我的样式和图像资源没有产生任何结果(我没有添加或删除任何依赖项,更改任何东西(配置)等)。
在我的例子中,我在src()中使用|来读取多个文件,如src('src/styles/**/*.{sass|scss}')src('src/images/*.{png|jpg|svg}'),所以它变成了这导致我的文件被忽略。
|更改为,解决了我的问题src('src/styles/**/*.{sass,scss}')src('src/images/*.{png,jpg,svg}')

相关问题