Angular 在scss保存时重新加载页面
我正在使用官方指南玩Angular 2 package.json文件中的开发人员依赖项允许通过保存html文件进行实时重新加载 我还使用Gulp和live将SCS重新加载到css来装饰我的东西 我想要的是绑定Gulp的scss实时重载和Angular 2的html实时重载。我的意思是,当我在SCS或html文件中保存更改时,我希望这些更改通过实时重新加载完成 目前,我只能通过在终端中运行Gulp命令或npmstart命令来分别更改scss和html 我的gulpfile.js代码:Angular 在scss保存时重新加载页面,angular,gulp,gulp-livereload,Angular,Gulp,Gulp Livereload,我正在使用官方指南玩Angular 2 package.json文件中的开发人员依赖项允许通过保存html文件进行实时重新加载 我还使用Gulp和live将SCS重新加载到css来装饰我的东西 我想要的是绑定Gulp的scss实时重载和Angular 2的html实时重载。我的意思是,当我在SCS或html文件中保存更改时,我希望这些更改通过实时重新加载完成 目前,我只能通过在终端中运行Gulp命令或npmstart命令来分别更改scss和html 我的gulpfile.js代码: var gu
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'))
});
My 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
文件中的变化
在yougulpfile.js中
//Watch task
gulp.task('sassWatch',function() {
gulp.watch('app/assets/scss/**/*.scss',['sass']);
});
其次,您必须同时启动tsc watch和lite服务器的gulp watch
在您的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"
},
是的,但事实上它并没有改变任何事情。它允许在TerminalMabe lite服务器中使用npm start命令,使用Gulp或html(ts/js…)更改scss文件。默认情况下,服务器不会在css文件中查找更改。您是否尝试自定义lite服务器配置?本教程介绍如何将SCS编译为css,甚至进行实时重新加载: