安裝 node-sass
搜索：node sass github
github官網(wǎng)：https://github.com/sass/node-sass
命令行輸入：
npm install node-sass -g
-g表示全局安裝
全局安裝與局部安裝的區(qū)別
全局安裝的命令會將插件安裝在全局目錄中 (包含在$PATH中)陋葡，不論在哪個目錄下都可以調(diào)用
局部安裝只能在當(dāng)前路徑使用該命令
使用 node-sass
查看版本號
node-sass -v
sass 的用法
-
更改CSS文件后綴為：
scss命令行中的寫法：
mv style.css style.scss 使用 sass 編譯：
node-sass style.scss style.css
也可以使用 scss 語法書寫代碼：
div { color: red;
> ul { font-size: 16px;
> li { border: 1px solid #000;
> a { font-weight: bold; }
}
}
}
再運行 node-sass style.scss style.css 后編譯的語法：
div {
color: red; }
div > ul {
font-size: 16px; }
div > ul > li {
border: 1px solid #000; }
div > ul > li > a {
font-weight: bold; }
這樣就是編譯后的 CSS 了
自動化編譯
在先前的命令后添加 -w 需要編譯的文件名 例如：
node-sass style.scss style.css -w style.scss
這樣代碼就會實時編譯了或舞，不需要每次更改都去執(zhí)行先前的命令
科普 scss 的 由來
sass 語法 (被前端程序猿看不懂) ：
body
p
color: red
于是編譯為 scss 語法 (被前端程序猿看懂的) ：
body p {
color: red; }
babel 用法
官網(wǎng)的安裝教程：https://babeljs.io/docs/en/usage
安裝后點擊CLI查看命令行教程：https://babeljs.io/setup#installation
功能：為代碼兼容IE8
使用：
./node_modules/.bin/babel js -d dist --watch
--watch表示即時編譯，這樣就不需要每次更改源文件后執(zhí)行一次編譯低葫，它會監(jiān)聽源文件从撼，變動就會自動編譯
前端目錄分類
- src --- 全稱 source 表示未經(jīng)翻譯優(yōu)化的源代碼
- dist --- 全稱 distribution 表示要發(fā)布的代碼
- vendors --- 名字就是全稱 表示第三方代碼
- node_modules --- 表示第三方包
