Compiling only one scss file

[swaranan]

When I am compiling SCSS to CSS , gulp-sass is only compiling when i'm changing the main.scsss. But when im changing on any child fie , compiliton not working.

My gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var htmlmin = require('gulp-htmlmin');
var connect = require('gulp-connect');
var uglify = require('gulp-uglify');

var paths = {
    sass: ['source/scss/main.scss'],
    html: {
        index: 'source/index.html'
    },
    libs: [
        'node_modules/jquery.2/node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
        'node_modules/gsap/TweenLite.js',
        'node_modules/gsap/CSSPlugin.js'
    ],
    custom: [
        'source/js/**/*.js'
    ],
    assets: {
        images: ['source/img/*', 'source/img/**/*'],
        fonts: ['source/fonts/*', 'source/fonts/**/*', 'node_modules/bootstrap-sass/assets/fonts/bootstrap/*.*']
    },
    build: 'build'
}

gulp.task('connect', function () {
    connect.server({
        root: 'build',
        livereload: true,
        port: 8888
    });
});

gulp.task('html', function () {
    gulp.src(paths.html.index)
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest(paths.build))
        .pipe(connect.reload());
});

gulp.task('css', function () {
    gulp.src(paths.sass)
        .pipe(sass({
            includePath: 'source/scss'
          }).on('error', sass.logError))
        .pipe(cssnano())
        .pipe(gulp.dest(paths.build + '/css'))
        .pipe(connect.reload());
});

gulp.task('libs', function () {
    gulp.src(paths.libs)
        .pipe(concat('js/libs.js'))
        .pipe(uglify())
        .pipe(gulp.dest(paths.build))
        .pipe(connect.reload());
});

gulp.task('js', function () {
    return gulp.src(paths.custom)
        .pipe(concat('js/custom.js'))
        .pipe(gulp.dest(paths.build))
        .pipe(connect.reload());
});

gulp.task('imgs', function () {
    gulp
        .src(paths.assets.images)
        .pipe(gulp.dest(paths.build + "/img"));
});

gulp.task('fonts', function () {
    gulp
        .src(paths.assets.fonts)
        .pipe(gulp.dest(paths.build + "/fonts"));
});
gulp.task('default', ['connect'], function () {
    gulp.watch(paths.sass, ['css']),
        gulp.watch(paths.html.index, ['html']),
        gulp.watch(paths.libs, ['libs']),
        gulp.watch(paths.custom, ['js']),
        gulp.watch(paths.assets.images, ['imgs']),
        gulp.watch(paths.assets.fonts, ['fonts'])
});

main.scss:

@import "custom";
body{
    margin: auto;
    background: #ff0;
}

My folder tree:

[xzyfer]

There are many duplicate bugs for this, please search. This is sadly how gulp works.

[Surfing-Chef]

Did you try changing the source in var paths?

From sass: ['source/scss/main.scss'], to sass: ['source/scss/**/*.scss'],

[swaranan]

Yes, it working..But "includePaths: " command on gulp-sass not working..Thanks @Surfing-Chef will go ahead using your method.