Я играю с Angular 2 используя официальный Quick start руководство.Обновить страницу на scss save
Dev Зависимости от файла package.json позволяют выполнять перезагрузку, сохраняя html-файлы.
Я также использую Gulp и живую перезагрузку scss для css для украшения моих вещей.
Я хочу, чтобы связать живую перезагрузку Gulp's scss с обновлением html в режиме Angular 2. Я имею в виду, что когда я сохраняю изменения либо в scss, либо в html-файле, я хочу, чтобы эти изменения выполнялись с живой перезагрузкой.
На данный момент я могу изменять scss и html только отдельно, запустив команду «Gulp» или команду запуска npm в Terminal.
Мои 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"
}
}
В этом руководстве объясняется, как компилировать SCSS в CSS и даже сделать живой перезарядку: https://medium.com/@lampt2509/set-up-persistence-scss -from-chrome-devtools-for-angular-220ce0818568 –