Gulp is not compiling SCSS to CSS

Question

I am new to gulp sass so I am currently learning with this https://css-tricks.com/gulp-for-beginners/. The current topic I am working from the above link is #Preprocessing with Gulp

All the stuff is getting fine until I test my sass file after testing it ( to know that it is compiling the CSS ) I trigger that it is not compiling SCSS to CSS why is it so.

Thinks to know.

1. I am currently not working on my localhost. I have made the project file on my desktop.

2. I have created the CSS file manually for the first time to see that my SCSS compiles my Current CSS file

What I am doing wrong.

UPDATE :

Inside my Gulp file :

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'));
})

My file structure:

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

Note: The file Structure is same as in the CSS Trick.

Answer 1

Try adding ./ to your source path:

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

This tells it to start from the current directory, relative to the gulpfile.

Edit - you'll also need the same thing for the destination path:

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

Answer 2

Your gulpfile looks ok. Your folder structure is ok.

I would like to ask wether you installed gulp-sass in your machine.

If you have not install.

Install it npm install gulp-sass --save-dev.

You don't need actually to create css file to test wether it works or not. It's ok if you have created too.

Check and let us know. Thanks.

Answer 3

you need to remove the semicolon on this line

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

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'))
});