Gulp not compiling SCSS

[panayotoff]

Hi, I thing it is gulp problem, not your config, but it's still weird. Watching the late tuts, from 2017, node v8.4.0 npm v 5.3.0 and gulp-sass 3.1.0. The live-reload server is working, if an update is made into php template, the changes are hot-reloader, JS is compiled, but SCSS is not compiling at all ( task is running thought ) and no errors are thrown. It would be great if you update the Gulpfile.js config, or switch to Webpack. I'm currently try it to work with Webpack.

[SpyrosKo]

Ok, so I think I figured it out. I grabbed this chunk of gulpfile.js gulp-sass code from another project I had been working with and placed it into the gulpfile.js for this course. And now it works!

var themename = 'humescores';

var gulp = require('gulp'),
   // Prepare and optimize code etc
   autoprefixer = require('autoprefixer'),
   browserSync = require('browser-sync').create(),
   image = require('gulp-image'),
   jshint = require('gulp-jshint'),
   postcss = require('gulp-postcss'),
   sass = require('gulp-sass'),
   sourcemaps = require('gulp-sourcemaps'),

   // Only work with new or updated files
   newer = require('gulp-newer'),

   // Name of working theme folder
   root = '../' + themename + '/',
   scss = root + 'sass/',
   js = root + 'js/',
   img = root + 'images/',
   languages = root + 'languages/';

//----------------------------------------------------------------------------------------------------
//  ADDED FROM ANOTHER GULPFILE.JS PROJECT AND INSERTED INTO THIS ONE----------
//----------------------------------------------------------------------------------------------------

gulp.task('sass', function() {
   return gulp.src('assets/sass/**/*.scss')
   .pipe(sourcemaps.init())
   .pipe(autoprefixer({
      browsers: ['last 2 version'],
      cascade: false
   }))
   .pipe(sass({
      outputStyle: 'uncompressed'
   })
   .on('error', sass.logError ))
   .pipe(sourcemaps.write('/maps'))
   .pipe(gulp.dest('./'))
   .pipe(connect.reload());
});

//------------------------------------- END OF CODE -----------------------------------

// CSS via Sass and Autoprefixer
gulp.task('css', function() {
   return gulp.src(scss + '{style.scss,rtl.scss}')
   .pipe(sourcemaps.init())
   .pipe(sass({
      outputStyle: 'expanded',
      indentType: 'tab',
      indentWidth: '1'
   }).on('error', sass.logError))
   .pipe(postcss([
      autoprefixer('last 2 versions', '> 1%')
   ]))
   .pipe(sourcemaps.write(scss + 'maps'))
   .pipe(gulp.dest(root));
});

// Optimize images through gulp-image
gulp.task('images', function() {
   return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
   .pipe(newer(img))
   .pipe(image())
   .pipe(gulp.dest(img));
});

// JavaScript
gulp.task('javascript', function() {
   return gulp.src([js + '*.js'])
   .pipe(jshint())
   .pipe(jshint.reporter('default'))
   .pipe(gulp.dest(js));
});


// Watch everything
gulp.task('watch', function() {
   browserSync.init({
      open: 'external',
      proxy: 'localhost/wordpress',
      port: 8080
   });
   gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
   gulp.watch(js + '**/*.js', ['javascript']);
   gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
   gulp.watch(root + '**/*').on('change', browserSync.reload);
});


// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);

[SaraSvensson]

I tried adding the code above, it still didn't work.

Finally I decided to use the common approach to let Netbeans do it for me.

1. In File->Project properties->CSS Preprocessor, choose compile Sass files on Save.
2. Double click on the filed under /scss in the column Input in watch table and add the path for the scss file that has to be watched for any changes
   (if you follow Mortens Lynda course it will be: /wp-content/themes/Your Theme's folder name/sass
3. Also define where is the css file that needs to be changed in the next column.
4. Top right corner, Configure Executable path for the sass you installed (on Mac it could be /usr/local/bin/scss).

Thats it. It works like a charm.

[davidkhierl]

var themename = 'humescores';

var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),

// Only work with new or updated files
newer = require('gulp-newer'),

// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';

// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});

// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});

// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});

// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'humescores.test',
port: 8080
});
gulp.watch([root + '/*.scss' ], gulp.parallel('css'));
gulp.watch(js + '/.js', gulp.parallel('javascript'));
gulp.watch(img + 'RAW/**/.{jpg,JPG,png}', gulp.parallel('images'));
gulp.watch(root + '**/*').on('change', browserSync.reload);
});

// Default task (runs at initiation: gulp --verbose)
gulp.task('default', gulp.series('watch'));

FOR GULP 4