Gulp没有编译SCSS到CSS

Question

我刚开始学习gulp sass，所以我正在使用https://css-tricks.com/gulp-for-beginners/进行学习。我正在从上面的链接中学习#使用Gulp预处理这个主题。

一切都很好，直到我测试我的sass文件（为了知道它是否编译CSS），我触发了它没有将SCSS编译为CSS，为什么会这样呢？

需要知道的事情：

1. 我目前不在本地主机上工作。我已经在桌面上创建了项目文件。
2. 我手动创建了CSS文件，以便第一次查看我的SCSS是否编译成当前的CSS文件。

我做错了什么。

更新：

在我的Gulp文件内：

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

gulp.task( 'sass', function() {
    return gulp.src('app/scss/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('app/css'));
})

我的文件结构：

|- app/
      |- css/
      |- fonts/
      |- images/ 
      |- index.html
      |- js/ 
      |- scss/
           |- style.scss
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json

注意：文件结构与CSS Trick中相同。

- Owaiz Yusufi

---

请展示您的Gulpfile和文件结构。 - mattdevio

@magreenberg 我已经更新了我的答案，包括我的文件结构和Grunt文件代码。 - Owaiz Yusufi

CSS文件会自动生成吗，还是我需要手动创建它？ - Owaiz Yusufi

@OwaizYusufi 所有的CSS文件应该自动创建，并且所有的错误将会在控制台中显示。 - Minzkraut

@Minzkraut，这里出现了一个问题，CSS文件没有自动生成，并且控制台中也没有错误信息。 - Owaiz Yusufi

Answer 1

您的gulpfile看起来不错。您的文件夹结构也很好。

我想问一下您是否在您的计算机上安装了gulp-sass。

如果您还没有安装，请执行以下命令进行安装：npm install gulp-sass --save-dev。

实际上，您并不需要创建CSS文件来测试它是否有效。如果您已经创建了，那就没问题了。

请检查并告诉我们。谢谢。

- Waseef

Answer 2

你需要在这行代码中去掉分号

.pipe(gulp.dest('app/css'));

在任务末尾添加一个“1”，就像这样：

and add one o the end of the task, like this

gulp.task( 'sass', function() {
    return gulp.src('app/scss/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('app/css'))
});

- lukeocom

Answer 3

尝试在源路径中添加./：

return gulp.src('./app/scss/**/*.scss')
...

这告诉它从相对于gulpfile的当前目录开始。

编辑 - 您还需要相同的目标路径。

  .pipe(gulp.dest('./app/css'));

- D-Money