Перезагрузить страницу на scss сохранить

Question

Я играю с Angular 2, используя официальное краткое руководство.

Зависимости Dev из файла package.json позволяют выполнять перезагрузку в реальном времени путем сохранения html-файлов.

Я также использую Gulp и live ress scss для css для украшения моих вещей.

То, что я хочу, - это связать живую перезагрузку scss с Gulp с прямой загрузкой html Angular 2. Я имею в виду, когда я сохраняю изменения либо в файле scss, либо в html-файле, я хочу, чтобы эти изменения выполнялись с живой перезагрузкой.

Пока что я могу вносить изменения в scss и html только отдельно, запустив команду Gulp или команду npm start в Терминале.

Мой код gulpfile.js:

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'))
});

Мой код package.json:

{
 "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"
 }
}

Answer 1

Во-первых, вы должны сказать своим глотком следить за изменениями в вашем scss файл.

В тебе gulpfile.js

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

Во-вторых, вы должны запустить эти gulp watch одновременно с tsc watch и lite server.

В вашем 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"
 },