Search code examples
sassgulp

Gulp not register changes when move scss files into folders

When my file structure looks like this, in same folder gulp watch is working and register changes

├─ styles
   ├── _color.scss
   ├── _mixins.scss
   ├── _layout.scss
   ├── _navigation.scss
   ├── main.scss

main.scss

@import "colors";
@import "mixins";
@import "navigation";

But when I move scss files into folder like this:

enter image description here

And import it from main file:

@import "globals/colors";
@import "globals/mixins";
@import "components/navigation";

It's not working, and not register any changes when run gulp watch. Here is my gulpfile.js:

var gulp = require('gulp'),
		sass = require ('gulp-sass'),
		notify = require('gulp-notify'),
		mainBowerFiles = require('main-bower-files'),
		filter = require('gulp-filter'),
		autoprefixer = require('gulp-autoprefixer'),
		concat = require('gulp-concat'),
		uglify = require('gulp-uglify');

var config = {
	stylesPath: 'assets/styles',
	jsPath: 'assets/scripts',
	bowerDir: 'bower_components'
    ,
	outputDir: 'public'
}

gulp.task('js', function() {
	return gulp.src(mainBowerFiles().concat(config.jsPath+'/*'))
		.pipe(filter('**/*.js'))
		.pipe(concat('main.js'))
		.pipe(uglify())
		.pipe(gulp.dest(config.outputDir + '/js'));
});

gulp.task('icons', function() {

	return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')

		.pipe(gulp.dest(config.outputDir + '/fonts'));

});

gulp.task('css', function() {
	return gulp.src(config.stylesPath + '/main.scss')
		.pipe(sass({
				outputStyle: 'compressed',
				includePaths: [
					config.stylesPath,
					config.bowerDir + '/bootstrap-sass/assets/stylesheets',
					config.bowerDir + '/font-awesome/scss'
				]
			}).on('error', sass.logError))
		.pipe(autoprefixer())
		.pipe(gulp.dest(config.outputDir + '/css'));
});

gulp.task('watch', function(){
	gulp.watch([config.stylesPath + '**/*.scss', config.stylesPath + '**/*.sass', config.stylesPath + '**/*.css'], ['css']);

	gulp.watch([config.jsPath + '**/*.js'], ['js']);

})

gulp.task('default', ['js', 'css', 'icons']);

So, what is the problem with my project structure, so that gulp watch is not working?

Solution

  • It was a problem with my gulp.js file, task watch. I change it to:

    gulp.task('watch', function(){
    gulp.watch([config.stylesPath + '/**/*.scss', config.stylesPath + '/**/*.sass', config.stylesPath + '/**/*.css'], ['css']);

    gulp.watch([config.jsPath + '**/*.js'], ['js']);

})