Question

编辑：解决方案

这是我的gulpfile

var gulp = require('gulp');
var sass = require('gulp-sass');
var minify = require('gulp-minify');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

var allSassFiles = 'scss/**/*.scss';
var sassFile = gulp.src('./scss/style.scss');
var cssDest = '../wp-content/themes/Jupiter-child/uwkc_assets/css');

var sassify = function() {
  return sassFile.pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed', onError: sass.logError}))
    .pipe(gulp.dest(cssDest + '/prod'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(cssDest));
};

gulp.task('doSass', sassify);

gulp.task('watchSass', function(){
  return gulp.watch(allSassFiles, ['doSass']);
});

sass glob是变量＆＃34; allSassFiles＆＃34;。小号当我执行任务＆＃34; doSass＆＃34;一切都很好。我的css更改在浏览器中显示。

然而，当我运行＆＃34; watchSass＆＃34;任务事物只改变一次，然后进一步的改变不会反映在浏览器中。这就像只运行一次＆＃34; doSass＆＃34;。

奇怪的是，在我的控制台中，我看到了doSass的开始和完整日志，好像一切正常。但是，我没有看到对我的css目标文件进行任何更改。

我尝试了很多东西，混淆了我要返回的东西，改变了glob语法。许多事。出于某种原因，我无法让这件事情发挥作用。

有人看到我可能遗失的任何东西吗？我觉得它与gulp-sass或sourcemaps返回的内容有关，但我对这些内容并不了解，无法找到答案。

谢谢大家！

Answer 1

这就是我想到的：

每次我在watch运行时运行sassify时，我都需要创建一个新的gulp.src（）对象。我也希望我能正确使用这些条款。

我重写了：

return sassFile.pipe(sourcemaps.init())

在sassify函数中：

return gulp.src('./scss/style.scss').pipe(sourcemaps.init())

这就是诀窍。我有意义的是，watch会重复使用变量 sassFile 中引用的src对象，该对象不代表已更改的scss文件。

无论如何，我希望这可以帮助将来的人。

Gulp观察它运行的日志记录，但我的文件没有变化

1 个答案: