SASS de Gulp compilent seulement changé le dossier de fichiers modifiés

Question

Beaucoup de questions à ce sujet ont déjà été posées, mais malheureusement, aucun d'entre eux de résoudre mon problème ...

Au bureau, nous avons un cadre de PHP personnalisé et quelques applications qui court avec elle dans une boîte vagabonde. Une règle a été définie il y a longtemps concernant les fichiers SCSS. Ils sont dans un dossier "scss" et compilent dans ../ (qui est la plupart du temps le dossier css). Nous utilisons npm et gulp-sass pour ce faire, avec gulp-autoprefixer.

Exemple: foo/bar/css/SCSS /foo.scss -> foo/bar/ /foo.css css

Le problème est que dans notre cadre, nous n'avons pas un dossier « dest » commun pour tous, de sorte que la montre est actuellement comme ça:

framework/**/scss/**/*.scss 

nous avons plusieurs sous-modules dans le cadre, et plusieurs chemins possibles pour dossier SCSS, par exemple:

• fw/sous-module/_www/css/foo/bar/SCSS/
• fw/sous-module/subsubmodule/_www/css/foo/bar/fooagain/SCSS/
• fw/sous-module/views/tpl/bibliothèque/libraryname/default/css/foo/bar/SCSS/

etc ...

donc afin de compiler au bon endroit, nous utilisons gulp-Rename (dossier var est le nom de le FW) à compiler dans le dossier des ancêtres.

gulp.task('sass',() => { 
    return gulp.src([folder+'**/scss/**/*.scss']) 
     .pipe(plumber()) 
     .pipe(sass(sassOptions)) 
     .pipe(autoprefixer(autoprefixerOptions)) 
     .pipe(rename((filePath) => { 
      filePath.dirname = filePath.dirname.replace("scss", ""); 
     })).pipe(gulp.dest(folder)); 
}); 

Le problème est: lorsque vous enregistrez un fichier scss, il compile le fichier ~ 200. ce. est. alors. longue.

Une compilation complète nécessite entre 8 et 20 secondes.

Dans notre serveur de pré-production, nous avons un bash qui exécute et compile tous les fichiers scss frères et soeurs lorsque vous enregistrez un. Mais je n'arrive pas à le faire avec gulp.

Mon souhait est: un fichier scss est modifié, nous le compilons lui et ses frères et soeurs. Pas tous les fichiers scss. Vous pensez que c'est possible?

Merci beaucoup.

Answer 1

vous pourriez créer une fonction dans gulpfile qui vous donnerait une tâche spécifique pour chaque "groupe" de fichiers scss. quelque chose comme ça

function compileStylesTask(taskName, srcFiles, distFolder, compiledFileName) { 
    gulp.task(taskName, function() { 
     var style = gulp.src(srcFiles) 
      .pipe(sass().on('error', sass.logError)) 
      .pipe(rename({basename: compiledFileName})) 
      .pipe(gulp.dest(distFolder)) 
     return merge(style); 
    }); 
} 

compileStylesTask('someCustomCssTask', [ 
    'src/css/some.scss', 
    'src/css/some2.scss' 
], 'someCompiledName', '/dist/css'); 

Et dans votre tâche de montre que vous pouvez maintenant ajouter la montre pour chaque groupe séparément comme celui-ci

gulp.task('watch', function() { 
    gulp.watch('/src/scss/some.scss', ['someCustomCssTask']); 
}); 

Cela déclenchera que cette tâche de SCSS spécifique à exécuter.