Wie bekomme ich Schluck zu sehen, meine Sass-Datei Änderungen und erstellen Sie eine CSS-Datei?

Question

Ich arbeite an einer Anwendung, die mit ASP.NET MVC 5 Framework entwickelt wird. Ich verwende Visual Studio 2013, um meine Anwendung zu schreiben.

Ich muss gulp verwenden, um den Prozess der Kompilierung meiner Sass-Datei zu automatisieren und sie in einer bundle.css-Datei zu veröffentlichen.

, das zu tun, hier ist das, was ich

1. installiert NodeJs auf meinem Rechner
2. installiert gulp global mit npm install -g gulp
3. Erstellt eine Datei namens gulpfile.js in dem Stammprojekt des Projektes
getan habe
4. erstellt die package.json Datei mit npm init Befehl
5. Hinzugefügt Schluck zu meinem Entwicklung Abhängigkeiten von der Wurzel meines Projekts den folgenden Befehl ausführen npm install gulp --save-dev
6. Added den Code unten zu meinem gulpfile.js

7. Von der Kommandokonsole feuerte ich gulp Befehl, der die folgenden Informationen angezeigt

   Mit gulpfile ... gulpfile.js

   Start 'watch' ...

   Finished 'Uhr' nach 21 ms

   Start 'default' ...

   Fertig 'default' nach 31 us

Aber wenn ich Code in meine ~/Assets/Sass/**/*.sass nichts schreiben wird in ~/Public/Css/bundle.css gespeichert als

Hier erwarten ist, was gulpfile.js sieht aus wie

const gulp = require('gulp'), 
     sass = require('gulp-ruby-sass'); 

// Default task which will be be fired when the runner is started 
gulp.task('default', ['watch']); 

// listener task 
gulp.task('watch', function(){ 

    //Watch any change in the sass directory and trigger the "compileSass" for every save 
    gulp.watch('~/Assets/Sass/**/*.sass', ['compileSass']); 

}); 

// Task to compile the sass files 
gulp.task('compileSass',() => 
    sass('~/Assets/Sass/**/*.sass') 
     .on('error', sass.logError) 
     .pipe(gulp.dest('~/Public/Css/bundle.css')) 
); 

Was fehlt mir hier? Wie kann ich die Betrachteten dazu bringen, die Aufgaben nach jedem Speichern zu beobachten und abzufeuern?

Ich schalte in mit gulp-scss verwenden gulp-ruby-sass Plugin aktualisiert. Nun habe ich die Aufgabe jedes Mal ausgeführt, wenn ich eine scss Datei speichere, aber aus irgendeinem Grund wird die Zieldatei nicht aktualisiert.

Hier ist, wie meine gulpfile.js Datei aussieht

const gulp = require('gulp'), 
     scss = require('gulp-scss'); 

// Default task which will be be fired when the runner is started 
gulp.task('default', ['watch']); 

// listener task 
gulp.task('watch', function(){ 

    //Watch any change in the "Sass" directory and trigger the "compileScss" for every save 
    gulp.watch('./Assets/Scss/**/*.scss', ['compileScss']); 

}); 

// Task to compile the "Scss" files 
gulp.task('compileScss', function() { 
    gulp.src('./Assets/Scss/**/*.scss') 
     .pipe(scss({ "bundleExec": true })) 
     .pipe(gulp.dest('./Public/Css/bundle.css')); 
}); 

Answer 1

Sie können fehlen, die erfordern für schluck-watch:

var watch = require('gulp-watch'); 

Von gulp-watch:

watch (glob, [Optionen, Rückruf]) Erstellt einen Beobachter, der Dateien ausspioniert, die mit glob übereinstimmen, die eine Glob-Zeichenfolge oder ein Array von Glob-Strings sein können.

Gibt einen Durchgangsstrom zurück, der Vinyl-Dateien (mit der zusätzlichen Ereigniseigenschaft ) ausgibt, die dem Ereignis im Dateisystem entsprechen.

Sie müssen eine Funktion bereitstellen. Das bedeutet, dass ein Aufgabenname nicht ausreicht.

Versuchen schluck-Batch mit einigen Aufgaben withing Ihre Uhr laufen:

npm install gulp-batch --save-dev 

Ihre Uhr Aufgabe:

// listener task 
gulp.task('watch', function(){ 

    var watch = require('gulp-watch'); 
    var batch = require('gulp-batch'); 

    //Watch any change in the sass directory and trigger the "compileSass" for every save 
    watch('~/Assets/Sass/**/*.sass', batch(function (events, done) { 
     // run your compileSass task 
     gulp.start('compileSass', done); 

    })); 

}); 

---

Edit:

Sie können Aufgaben ausführen von Visual Studio 2015 im Fenster "Task Runner Explorer".

Wenn Sie jedoch eine Eingabeaufforderung haben gulp-watch sollte es den gleichen Effekt haben und Ihre Compile-Task ausführen, wenn Änderungen an den Dateien, die Sie beobachten, unabhängig davon, wo sie bearbeitet wurden.

Answer 2

Grundlegende Dinge zu überprüfen sind Ordner Speicherort Existenz, Dateinamen und Lese-/Schreibberechtigungen.

Beispiel gulpfile.js, das gulp.watch und gulp-load-plugins in einem Projekt Zurb Foundation 6 verwendet (foundation-cli).

Beachten Sie, dass .pipe(gulp.dest('../your/path/css')); keine ~ enthält oder geben Sie einen Dateinamen oder eine Erweiterung an. Es gibt nur einen Pfad an. Die Datei in diesem Pfad erhält den Standardnamen style.css, da der Name der Quelldatei style.scss ist. Siehe Zeile gulp.src('scss/style.scss').

var gulp = require('gulp'); 
var $ = require('gulp-load-plugins')(); 

// Multiple locations of SCSS to combine 
var sassPaths = [ 
    'bower_components/foundation-sites/scss', 
    'bower_components/motion-ui/src' 
]; 

gulp.task('sass', function() { 
    return gulp.src('scss/style.scss')   // SCSS Source file 
    .pipe($.sass({ 
     includePaths: sassPaths, 
     outputStyle: 'compressed'    // if css compressed **file size** 
    }) 
     .on('error', $.sass.logError)) 
    .pipe($.autoprefixer({ 
     browsers: ['last 2 versions', 'ie >= 9'] 
    })) 
    .pipe(gulp.dest('../your/path/css'));  // OUTPUT Destination 
}); 

gulp.task('default', ['sass'], function() { 
    gulp.watch(['scss/**/*.scss'], ['sass']); // FILES to Watch 
});