Javascript 要想改变风格，你必须不止一次地大口大口喝

我在编译CSS时遇到了一个问题，当我在SASS文件中进行更改时，在多次尝试之后，它不会更改最终文件

var gulp = require('gulp'); var sass = require('gulp-sass'); var rename = require('gulp-rename'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssnano = require('cssnano'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); //CSS Tasks gulp.task('styles', function() { console.log("Compilling SASS"); gulp.src('app/sass/style.scss') .pipe(sass().on('error', sass.logError)) .pipe(postcss([ autoprefixer() ])) .pipe(rename('999_style.css')) .pipe(gulp.dest('app/css/')); }); gulp.task('stylescompress', ['styles'], function() { console.log("Concating and moving all the css files in styles folder"); gulp.src("app/css/**.css") .pipe(concat('style.css')) .pipe(postcss([ cssnano() ])) .pipe(gulp.dest('css/')); }); //Javascript Tasks gulp.task('jscompress', function() { //console.log("Concating and moving all the js files in javascript folder"); gulp.src("app/js/**.js") .pipe(concat('scripts.js')) .pipe(gulp.dest('js/')) .pipe(rename('scripts.min.js')) .pipe(uglify()) .pipe(gulp.dest('js/')) }); //Watch task gulp.task('default',function() { gulp.watch(['app/sass/**/*.scss'],['stylescompress']) .on('change', function(event) { console.log('SASS - File ' + event.path + ' was ' + event.type + ', running tasks...'); }); gulp.watch(['app/js/**/*.js'],['jscompress']) .on('change', function(event) { console.log('SCRIPTS - File ' + event.path + ' was ' + event.type + ', running tasks...'); }); }); var gulp=需要（“gulp”）； var sass=需要（'gulp-sass'）； var rename=require（'gulp-rename'）； var POSTSSS=需要（“大容量后处理”）； var autoprefixer=require（'autoprefixer'）； var cssnano=require（'cssnano'）； var concat=需要（“咕噜咕噜咕噜”）； var-uglify=需要（'gulp-uglify'）； //CSS任务 gulp.task（'style'，function（））{ console.log（“编译SASS”）； gulp.src（'app/sass/style.scss'） .pipe（sass（）.on（'error'，sass.logError）） .pipe（postsss（[autoprefixer（）]）） .pipe（重命名（'999_style.css'）） .pipe（吞咽目标（'app/css/'）； }); gulp.task（'stylescompress'，['styles']，function（））{ log（“浓缩并移动样式文件夹中的所有css文件”）； gulp.src（“app/css/**.css”） .pipe（concat（'style.css'）） .pipe（postsss（[cssnano（）]）） .pipe（吞咽目标（'css/'）； }); //Javascript任务 gulp.task（'jscompress'，function（）{ //log（“浓缩并移动javascript文件夹中的所有js文件”）； gulp.src（“app/js/**.js”） .pipe（concat（'scripts.js'）） .pipe（gulp.dest（'js/'）） .pipe（重命名（'scripts.min.js'）） .管道（丑（） .pipe（gulp.dest（'js/'）） }); //监视任务 gulp.task（'default'，function（）{ 大口喝手表（['app/sass/***.scss']，['stylescompress']） .on（'change'，函数（事件）{ log（'SASS-File'+event.path+'是'+event.type+'，正在运行任务…'）； }); gulp.watch（['app/js/***.js']，['jscompress']） .on（'change'，函数（事件）{ log（'SCRIPTS-File'+event.path+'是'+event.type+'，正在运行任务…'）； }); });

---

如您所见，我使用了Gulp文档中的所有内容，但我没有发现发生了什么。

我丢失了完成时的返回，使Gulp了解何时应该调用下一个任务，这在中有记录

我使用流让gulp了解每个任务结束时的情况，如下所示：

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

安装浏览器同步 加

在sass任务中添加browserSync

gulp.task('sass', function() {
    console.log("Compilling SASS");
    gulp.src('app/sass/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([ autoprefixer() ]))
    .pipe(rename('999_style.css'))
    .pipe(gulp.dest('app/css/'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

然后添加一个“监视”任务

gulp.task('watch', ['browserSync', 'sass'], function() {
  gulp.watch('src/scss/**/*.scss', ['sass']);
});

然后在你的“默认”中

gulp.task('default', function(callback) {
  runSequence(['sass', 'browserSync', 'watch'],
    callback
  )
})

---

现在运行gulp watch:）

您并没有按照gulp文档做所有事情。阅读有关异步完成的部分。现在我明白了，我需要首先给出一个提示，说明它何时完成，然后脚本才能理解它何时真正完成。谢谢@svenschoenung你能澄清错误或最终代码在哪里吗？编辑了答案@billeb

gulp.task('default', function(callback) {
  runSequence(['sass', 'browserSync', 'watch'],
    callback
  )
})