Gulp项目无法创建目标文件夹求助（v3.9.1）

我一眼就发现问题出在你的styles任务配置里啦，咱们一步步来修复：

核心问题：gulp.dest() 路径配置错误 #

你当前的styles任务里，gulp.dest('./app/styles/styles.css')是错误的——gulp.dest()接收的是目标文件夹路径，而不是具体的文件路径。它会自动将源文件（这里是style.css）完整输出到指定文件夹中，不需要手动指定文件名。

修正后的完整代码 #

把styles任务里的gulp.dest路径改成文件夹路径，同时可以加个日志方便验证任务是否执行：

var gulp = require('gulp');
var watch = require('gulp-watch');

gulp.task('default', function(){ 
  console.log('You create a gulp task'); 
});

gulp.task('html', function(){ 
  console.log('imagine something') 
});

// 修正后的styles任务
gulp.task('styles', function(){ 
  console.log('Styles task is running!'); // 新增日志，验证任务触发
  return gulp.src('./app/assets/styles/style.css')
    .pipe(gulp.dest('./app/styles/')); // 改成文件夹路径
});

gulp.task('watch', function(){ 
  watch('./app/index.html', function(){ 
    gulp.start('html'); 
  }); 
  watch('./app/assets/styles/**/*.css', function(){ 
    gulp.start('styles'); 
  }) 
});

验证步骤 #

1. 先手动运行gulp styles，看看命令行是否输出Styles task is running!，同时检查./app/styles/文件夹是否生成并包含style.css。
2. 如果手动运行没问题，再启动gulp watch，修改./app/assets/styles/style.css，观察命令行是否触发日志，确认watch功能正常。

小提示（Gulp 3.x 优化） #

其实Gulp 3本身内置了gulp.watch方法，你可以把watch任务改成更简洁的写法（效果和你当前的插件写法一致）：

gulp.task('watch', function(){ 
  gulp.watch('./app/index.html', ['html']);
  gulp.watch('./app/assets/styles/**/*.css', ['styles']);
});

内容的提问来源于stack exchange，提问作者user12243608