Chronos
Aktives Mitglied
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:
Das gulpfile.js:
Danke schon mal
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:
Code:
app
+
+--+scss
| +
| +--+components
| | +
| | +--+_rocket-factory.scss
| | |
| | +--+_rockets.scss
| |
| +--+helper
| +
| +--+_variables.scss
|
+--+css
| +
| +--+object-observe.css
|
+--+gulpfile.js
Das gulpfile.js:
Code:
// 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