Reload Seite auf scss speichern

Ich spiele mit Angular 2 mit offiziellen Quick start Leitfaden.Reload Seite auf scss speichern

Dev Abhängigkeiten von der Datei package.json ermöglichen Live-Nachladen durch Speichern von HTML-Dateien.

Ich benutze auch Gulp und live nachladen scss zu CSS für die Dekoration meiner Sachen.

Was ich will, ist Gulp sss Live-Nachladen mit Angular 2 HTML-Live-Nachladung zu binden. Ich meine, wenn ich Änderungen entweder in einer scss oder in einer HTML-Datei speichern möchte, möchte ich, dass diese Änderungen mit dem Live-Reload durchgeführt werden.

Für jetzt kann ich scss und HTML-Änderungen nur separat machen, indem Sie entweder einen Gulp-Befehl oder den npm-Startbefehl in Terminal ausführen.

Mein gulpfile.js Code:

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

gulp.task('sass', function(){ 
     return gulp.src('app/assets/scss/styles.scss') 
    .pipe(sass()) 
    .pipe(gulp.dest('app/assets/css')) 
});

Mein package.json Code:

{ 
"name": "app", 
"version": "1.0.0", 
"scripts": { 
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
}, 
"license": "ISC", 
"dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/router": "3.0.0", 
    "@angular/upgrade": "2.0.0", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.23", 
    "angular2-in-memory-web-api": "0.0.20", 
    "bootstrap": "^3.3.6" 
}, 
"devDependencies": { 
    "browser-sync": "^2.16.0", 
    "concurrently": "^2.2.0", 
    "gulp": "^3.9.1", 
    "gulp-sass": "^2.3.2", 
    "lite-server": "^2.2.2", 
    "typescript": "^2.0.2", 
    "typings": "^1.3.2" 
} 
}

Quelle

2016-09-27 Alexandr Belov

Dieses Tutorial erklärt, wie SCSS zu CSS zu kompilieren und zu tun, auch Live-reload: https://medium.com/@lampt2509/set-up-persistence-scss -from-chrome-devtools-for-angular-220ce0818568 –

Zuerst müssen Sie Ihren Schluck sagen, für Änderungen in Ihrer scss Datei zu sehen.

In Sie gulpfile.js

//Watch task 
gulp.task('sassWatch',function() { 
    gulp.watch('app/assets/scss/**/*.scss',['sass']); 
});

Zweitens haben Sie diesen Schluck starten concurrenctly zu tsc Uhr und der Lite-Server sehen.

In Ihrem package.json

"scripts": { 
    "start": "concurrently \"npm run sass:w\" \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 

    "postinstall": "typings install", 

    "tsc": "tsc", 
    "tsc:w": "tsc -w", 

    "sass": "gulp sass", 
    "sass:w": "gulp sassWatch", 

    "typings": "typings" 
},

Quelle

2016-09-27 21:15:12

Ja, aber eigentlich ändert es nichts. Es ermöglicht Änderungen der scss-Datei mit Gulp oder html (ts/js ...) mit dem Befehl npm start in Terminal –

Vielleicht sucht der lite-Server nicht standardmäßig nach Änderungen in css-Dateien. Haben Sie versucht, die Lite-Server-Konfiguration anzupassen? –

Reload Seite auf scss speichern

Antwort

Verwandte Themen