How to generate a hierarchical rule CSS using Gulp

Question

I have a father file called: /assets/hierarchy-file.scss, inside it I import the children files:

@import "./style_guide";
@import './default_styles';

@import './header';

// :::::::::: OS ARQUIVOS DAS PÁGINAS DEVEM COMEÇAR AQUI :::::::::: 

@import './home';

// ::::::::::::::::::::::::: TERMINA AQUI ::::::::::::::::::::::::: 

@import './footer';

Using Gulp only when I edit the parent file hierarchy-file.scss, the watch listens to it and picks up the changes from the children’s files. I would like when I change any of these children files, the watch recognizes that the parent file has been changed: hierarchy-file.scss, what I need to do?

var paths = {
css:[
    //assets_path+'./assets/css/*.scss',   
    //assets_path+'./assets/css/**/*.scss',   
    assets_path+'./assets/css/hierarchy-files.scss',  
  ]
}

gulp.task('css', function() {
  gulp.src(paths.css)
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(concat('css.styles.css'))
    .pipe(gulpif(activeMinify, sass({outputStyle: 'compressed'})))
    .pipe(gulp.dest(public_path+'/css/'))
    .pipe(browserSync.stream())
  //  .on('end', done);
});

gulp.task('watch', function() {
  gulp.watch(paths.css, ['css']);
});