[ERLEDIGT] Gulp Sass und Browsersync auf mehrere Verzeichnisse

[Chronos]

Hallo Forum,

ich habe mir mit Mühe und Not einen Workflow zusammengestellt,
der für mich soweit optimal wäre;
über Gulp nutze ich einen Sass (benötigt afaik Ruby auf dem PC) und einen Browser-Sync Task.
Sass sollte klar sein und Browser-Sync stellt einen lokalen Webserver mit Synchronisation über mehrere Geräte und Browser dar.

Jetzt zu meinem Problem, bisher hatte ich eine Sass-Datei und das war es, habe ich diese gespeichert, wurde es kompiliert und der Browser neu geladen. Da es sich anbietet mit Sass Module zu schreiben wollte ich das tun, nur mit dem Problem, das ich wieder in meine Haupt-Datei muss um dort zu speichern und den Prozess anzustoßen.

Wer hat schon mal mit Gulp gearbeitet und kann mir helfen?

Meine Ordner Struktur ist:

app                                                          
+                                                           
+--+scss                                                    
|    +                                                      
|    +--+components                                         
|    |      +                                               
|    |      +--+_rocket-factory.scss                        
|    |      |                                               
|    |      +--+_rockets.scss                               
|    |                                                      
|    +--+helper                                             
|           +                                               
|           +--+_variables.scss                             
|                                                           
+--+css                                                     
|    +                                                      
|    +--+object-observe.css                                  
|                                                           
+--+gulpfile.js

Das gulpfile.js:

// Plugins
var gulp         = require('gulp');
var browserSync  = require('../_gulp-module/node_modules/browser-sync').create();
var sass         = require('../_gulp-module/node_modules/gulp-sass');
var reload       = browserSync.reload;

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', reload);
    gulp.watch("app/js/*.js").on('change', reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css/"))
        .pipe(reload({stream: true}));
});

gulp.task('default', ['serve', 'sass']);

Danke schon mal

 

[Chronos]

Verdammt ^^ hat sich erledigt, zu ersetzen ist nur Zeile 13 mit:

gulp.watch("app/scss/**/*.scss", ['sass']);

 

[scbawik]

Hallo Forum,

ich habe mir mit Mühe und Not einen Workflow zusammengestellt,
der für mich soweit optimal wäre;
über Gulp nutze ich einen Sass (benötigt afaik Ruby auf dem PC) und einen Browser-Sync Task.
Sass sollte klar sein und Browser-Sync stellt einen lokalen Webserver mit Synchronisation über mehrere Geräte und Browser dar.

Jetzt zu meinem Problem, bisher hatte ich eine Sass-Datei und das war es, habe ich diese gespeichert, wurde es kompiliert und der Browser neu geladen. Da es sich anbietet mit Sass Module zu schreiben wollte ich das tun, nur mit dem Problem, das ich wieder in meine Haupt-Datei muss um dort zu speichern und den Prozess anzustoßen.

Wer hat schon mal mit Gulp gearbeitet und kann mir helfen?

Meine Ordner Struktur ist:

app                                                        
+                                                         
+--+scss                                                  
|    +                                                    
|    +--+components                                       
|    |      +                                             
|    |      +--+_rocket-factory.scss                      
|    |      |                                             
|    |      +--+_rockets.scss                             
|    |                                                    
|    +--+helper                                           
|           +                                             
|           +--+_variables.scss                           
|                                                         
+--+css                                                   
|    +                                                    
|    +--+object-observe.css                                  
|                                                         
+--+gulpfile.js

Das gulpfile.js:

// Plugins
var gulp         = require('gulp');
var browserSync  = require('../_gulp-module/node_modules/browser-sync').create();
var sass         = require('../_gulp-module/node_modules/gulp-sass');
var reload       = browserSync.reload;

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', reload);
    gulp.watch("app/js/*.js").on('change', reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css/"))
        .pipe(reload({stream: true}));
});

gulp.task('default', ['serve', 'sass']);

Danke schon mal

Habe zwar nie damit gearbeitet, aber sollte das nicht so gehen:

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/**/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css/"))
        .pipe(reload({stream: true}));
});

EDIT: Oder so ;)

 

[Tronjer]

ch habe mir mit Mühe und Not einen Workflow zusammengestellt,
der für mich soweit optimal wäre;

Zu einem echten Workflow gehört auch, verschiedene Builds für Development und Production zu erstellen. Diese können sich in der Ordnerstruktur unterscheiden oder auch darin, dass beim Entwickeln eine kommentierte CSS-Datei kompiliert wird, während sie zum deployen minified sein soll. Mit Grunt lassen sich environment-spezifische Unterschiede direkt innerhalb der einzelnen Taks deklarieren, so dass man bsw. je nach Build 'sass:dev' oder 'sass: prod' aufrufen kann. Bei Gulp hingegen funktioniert so etwas nur über ein extra Config File, was eine zusätzliche Abstraktionsebene darstellt.

TL;DR: Gulp ist performanter, Grunt dafür leichter zu erlernen, wenn man einen komplexen Workflow aufbauen will. Bisher stehen da ja lediglich Sass Compilation und Browser Refresh.

 

[Chronos]

Zu einem echten Workflow gehört auch, verschiedene Builds für Development und Production zu erstellen. Diese können sich in der Ordnerstruktur unterscheiden oder auch darin, dass beim Entwickeln eine kommentierte CSS-Datei kompiliert wird, während sie zum deployen minified sein soll. Mit Grunt lassen sich environment-spezifische Unterschiede direkt innerhalb der einzelnen Taks deklarieren, so dass man bsw. je nach Build 'sass:dev' oder 'sass: prod' aufrufen kann. Bei Gulp hingegen funktioniert so etwas nur über ein extra Config File, was eine zusätzliche Abstraktionsebene darstellt.

TL;DR: Gulp ist performanter, Grunt dafür leichter zu erlernen, wenn man einen komplexen Workflow aufbauen will. Bisher stehen da ja lediglich Sass Compilation und Browser Refresh.

Ja das stimmt alles, gefühlt kommt es mir aber so vor, dass mittlerweile niemand mehr Grunt nutzt (generell neue Projekte).
Auch fand ich Grunt irgendwie noch unübersichtlicher als das es Gulp ist.
Das mit verschiedenen Tasks innerhalb eines Tasks würde man ja in Gulp auch über einen weiteren task abbilden können, nicht? Aber wenn es so weit ist, beschäftige ich mich noch mal genauer damit.

Minify etc. ist auch wichtig und möchte ich auch mal haben. Der Workflow ist hier eher für kleinere Sachen bei denen ich etwas ausprobieren möchte aber trotzdem den Sass Komfort und Browsersync haben will.