Gulp is not compiling sass to css - gulp

Question

I am not able to get the sass code I write to compile into CSS when I use any of the following commands:
gulp watch
gulp scss-for-prod
gulp scripts-for-prod
The strange thing is though that fork picks up when I make a change

Answer 1

SOLVED: add a clean package.json file
This is the Gulp.js
// Defining requirements
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var terser = require('gulp-terser');
//var uglify = require('gulp-uglify');
var merge2 = require('merge2');
var imagemin = require('gulp-imagemin');
var ignore = require('gulp-ignore');
var rimraf = require('gulp-rimraf');
var clone = require('gulp-clone');
var merge = require('gulp-merge');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
var del = require('del');
var cleanCSS = require('gulp-clean-css');
var gulpSequence = require('gulp-sequence');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
//var babel = require('gulp-babel');
var webpack = require('webpack-stream');
//var haml = require('gulp-haml');
// Configuration file to keep your code DRY
var cfg = require('./gulpconfig.json');
var paths = cfg.paths;
// Run:
// gulp sass + cssnano + rename
// Prepare the min.css for production (with 2 pipes to be sure that "theme.css" == "theme.min.css")
gulp.task('scss-for-prod', function () {
var source = gulp.src(paths.sass + '/*.scss')
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sass());
var pipeoutput = source.pipe(clone())
//.pipe(minifycss())
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(paths.css));
return pipeoutput;
});
// Run:
// gulp sourcemaps + sass + reload(browserSync)
// Prepare the child-theme.css for the development environment
gulp.task('scss-for-dev', function () {
gulp.src(paths.sass + '/*.scss')
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sass())
.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
.pipe(gulp.dest(paths.css));
});
gulp.task('watch-scss', ['browser-sync'], function () {
gulp.watch(paths.sass + '/**/*.scss', ['scss-for-dev']);
});
// Run:
// gulp sass
// Compiles SCSS files in CSS
gulp.task('sass', function () {
var stream = gulp.src(paths.sass + '/*.scss')
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sass({ errLogToConsole: true }))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest(paths.css));
return stream;
});
// Run:
// gulp watch
// Starts watcher. Watcher runs gulp sass task on changes
gulp.task('watch', function () {
gulp.watch(paths.haml + '/**/*.haml', ['convert-haml']);
gulp.watch(paths.sass + '/**/*.scss', ['styles']);
gulp.watch([paths.dev + '/js/**/*.js', 'js/**/*.js', '!js/theme.js', '!js/theme.min.js'], ['scripts']);
//Inside the watch task.
gulp.watch(paths.imgsrc + '/**', ['imagemin-watch']);
//browserSync.reload();
});
/**
* Ensures the 'imagemin' task is complete before reloading browsers
* #verbose
*/
gulp.task('imagemin-watch', ['imagemin'], function (done) {
browserSync.reload();
done();
});
// Run:
// gulp imagemin
// Running image optimizing task
gulp.task('imagemin', function () {
gulp.src(paths.imgsrc + '/**')
.pipe(imagemin())
.pipe(gulp.dest(paths.img));
});
// Run:
// gulp cssnano
// Minifies CSS files
gulp.task('cssnano', function () {
return gulp.src(paths.css + '/theme.css')
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rename({ suffix: '.min' }))
.pipe(cssnano({ discardComments: { removeAll: true } }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css));
});
gulp.task('minifycss', function () {
return gulp.src(paths.css + '/theme.css')
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(cleanCSS({ compatibility: '*' }))
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css));
});
gulp.task('cleancss', function () {
return gulp.src(paths.css + '/*.min.css', { read: false }) // Much faster
.pipe(ignore('theme.css'))
.pipe(rimraf());
});
//gulp.task( 'convert-haml', function( callback ) {
// gulp.src('./haml/**/*.haml')
// .pipe(haml({ext: '.php'}))
// .pipe(gulp.dest('./'));
//} );
gulp.task('styles', function (callback) {
//gulpSequence('sass', 'minifycss')(callback);
gulpSequence('sass', 'cleancss')(callback);
});
// Run:
// gulp browser-sync
// Starts browser-sync task for starting the server.
gulp.task('browser-sync', function () {
browserSync.init(cfg.browserSyncWatchFiles, cfg.browserSyncOptions);
});
// Run:
// gulp watch-bs
// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
gulp.task('watch-bs', ['browser-sync', 'watch', 'scripts'], function () {
});
// gulp scripts.
// Uglifies and concat all JS files into one
gulp.task('scripts', function () {
var scripts = [
//paths.dev + '/js/paginate.js',
//paths.dev + "/js/Select2.js",
paths.dev + "/js/slick/slick.js",
paths.dev + '/js/main.js',
];
gulp.src(scripts)
//.pipe(babel())
.pipe(webpack({
mode: 'development'
}))
.pipe(concat('theme.js'))
.pipe(gulp.dest(paths.js));
});
gulp.task('scripts-for-prod', function () {
var scripts = [
//paths.dev + '/js/paginate.js',
//paths.dev + "/js/Select2.js",
paths.dev + "/js/slick/slick.js",
paths.dev + '/js/main.js',
];
gulp.src(scripts)
//.pipe(babel())
.pipe(webpack({
mode: 'development'
}))
.pipe(concat('theme.min.js'))
//.pipe( uglify().on('error', function(e){
// console.log(e);
// }) )
/*.pipe(terser().on('error', function(e){
console.log(e);
}) )*/
.pipe(gulp.dest(paths.js));
});
// Deleting any file inside the /src folder
gulp.task('clean-source', function () {
return del(['src/**/*']);
});
// Run:
// gulp copy-assets.
// Copy all needed dependency assets files from bower_component assets to themes /js, /scss and /fonts folder. Run this task after bower install or bower update
////////////////// All Bootstrap SASS Assets /////////////////////////
gulp.task('copy-assets', function () {
// Tachyons CSS
//var stream = gulp.src( paths.node + 'tachyons-sass/tachyons.scss' )
//.pipe( gulp.dest( paths.dev + '/sass/tachyons-sass' ) );
var stream = gulp.src(paths.node + 'normalize-scss/sass/**/*')
.pipe(gulp.dest(paths.dev + '/sass/normalize-scss'));
//gulp.src( paths.node + 'tachyons-sass/scss/*.scss' )
//.pipe( gulp.dest( paths.dev + '/sass/tachyons-sass/scss' ) );
// Flexbox Grid
//gulp.src( paths.node + 'flexboxgrid-sass/flexboxgrid.scss' )
//.pipe( gulp.dest( paths.dev + '/sass/flexboxgrid-sass' ) );
//gulp.src( paths.node + 'sass-flex-mixin/**/*' )
//.pipe( gulp.dest( paths.dev + '/sass/sass-flex-mixin' ) );
gulp.src(paths.node + '#drewbot/sass-flexbox-grid/public/sass-flexbox/scss/**/*')
.pipe(gulp.dest(paths.dev + '/sass/sass-flexbox-grid'));
////////////////// All Bootstrap 4 Assets /////////////////////////
// Copy all JS files
//var stream = gulp.src( paths.node + 'bootstrap/dist/js/**/*.js' )
// .pipe( gulp.dest( paths.dev + '/js/bootstrap4' ) );
// Copy all Bootstrap SCSS files
//gulp.src( paths.node + 'bootstrap/scss/**/*.scss' )
// .pipe( gulp.dest( paths.dev + '/sass/bootstrap4' ) );
////////////////// End Bootstrap 4 Assets /////////////////////////
gulp
.src(paths.node + "slick-carousel-latest/slick/slick.js")
.pipe(gulp.dest(paths.dev + "/js/utils/slick"));
gulp
.src(paths.node + "slick-carousel-latest/slick/*")
.pipe(gulp.dest(paths.dev + "/sass/slick"));
gulp
.src(paths.node + "slick-carousel-latest/slick/fonts/*")
.pipe(gulp.dest(paths.css + "/fonts"));
//gulp.src(paths.node + 'vanillajs-datepicker/dist/**/*')
// .pipe(gulp.dest(paths.dev + '/js/utils/vanillajs-datepicker'));
gulp.src(paths.node + 'js-datepicker/src/**/*')
.pipe(gulp.dest(paths.dev + '/js/utils/js-datepicker'));
gulp.src(paths.node + 'js-datepicker/dist/**/*')
.pipe(gulp.dest(paths.dev + '/js/utils/js-datepicker'));
// Copy Sass Mq
gulp.src(paths.node + 'sass-mq/_mq.scss')
.pipe(gulp.dest(paths.dev + '/sass/sass-mq'));
// Copy all Font Awesome Fonts
gulp.src(paths.node + '#fortawesome/fontawesome-free/**/*.{ttf,woff,woff2,eot,svg}')
.pipe(gulp.dest('./fonts/fortawesome'));
// Copy all Font Awesome SCSS files
gulp.src(paths.node + '#fortawesome/fontawesome-free/scss/**/*.scss')
.pipe(gulp.dest(paths.dev + '/sass/fortawesome'));
return stream;
});
// Deleting the files distributed by the copy-assets task
gulp.task('clean-vendor-assets', function () {
return del([
paths.dev + '/js/vanillajs-datepicker/**',
paths.dev + '/sass/sass-flex-mixin/**',
paths.dev + '/sass/flexboxgrid-sass/**',
'./fonts/*wesome*.{ttf,woff,woff2,eot,svg}',
paths.dev + '/sass/fortawesome/**',
paths.dev + "/js/utils/slick/**",
paths.dev + "/sass/slick/**",
paths.fonts + "/slick/**",
paths.vendor !== '' ? (paths.js + paths.vendor + '/**') : ''
]);
});
// Run
// gulp dist
// Copies the files to the /dist folder for distribution as simple theme
gulp.task('dist', ['clean-dist'], function () {
return gulp.src(['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dev, '!' + paths.dev + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '!' + paths.sass, '!' + paths.sass + '/**', '!readme.txt', '!readme.md', '!package.json', '!package-lock.json', '!gulpfile.js', '!gulpconfig.json', '!CHANGELOG.md', '!.travis.yml', '!jshintignore', '!codesniffer.ruleset.xml', '*'], { 'buffer': false })
//.pipe( replace( '/js/jquery.slim.min.js', '/js' + paths.vendor + '/jquery.slim.min.js', { 'skipBinary': true } ) )
.pipe(replace('/js/main.js', '/js' + paths.vendor + '/main.js', { 'skipBinary': true }))
.pipe(gulp.dest(paths.dist));
});
// Deleting any file inside the /dist folder
gulp.task('clean-dist', function () {
return del([paths.dist + '/**']);
});
// Run
// gulp dist-product
// Copies the files to the /dist-prod folder for distribution as theme with all assets
gulp.task('dist-product', ['clean-dist-product'], function () {
return gulp.src(['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '*'])
.pipe(gulp.dest(paths.distprod));
});
// Deleting any file inside the /dist-product folder
gulp.task('clean-dist-product', function () {
return del([paths.distprod + '/**']);
});