day1:安裝在angular2中須要開發的scss工具

學習網站:http://www.angulartypescript.com/angular-2-sass/

一,使用scss,利用再package.json中建立scss和gulp的環境來實現自動將scss轉化爲css,而且放入指定目錄,其中涉及的依賴包:

autoprefixer:自動爲scss中key值和value值添加前綴的,例如:display:flex;  利用autoprefixer轉化後:

display: -ms-flexbox;

display: -webkit-box;

concurrently:同時運行多個命令,經常使用命令以下:

　　concurrently --kill-others "npm run watch-js" "npm run watch-less"

　　若是其中一個命令die,那麼其餘命令自動die

cssnano:執行各類優化,刪除空白和註釋,壓縮代碼

gulp:構建管理工具

gulp-ext-replace:利用gulp能夠改變文件擴展名

gulp-imagemin:壓縮jpeg,png,gif和svg圖片

gulp-postcss:利用以前的autoprefixer和cssnano等多個預處理器同時處理css文件,並且只需一次

gulp-sass:在gulp中編譯scss文件

gulp-sourcemaps:在編譯sass文件時會生成對應的map文件,當你在調試的時候就能夠看到哪些div樣式對應哪些sass代碼

gulp-typescript-babel:將typescript代碼編譯成ES2015,而後將ES2015編譯成ES5代碼

gulp-uglify:壓縮js文件

lite-server:輕量的node服務器

postcss:經過js插件將轉化css代碼

postcss-scss:將scss代碼修飾成更加接近css代碼

precss:容許你在你的css中使用相似sass的標記,例如變量,運算等等