一、less、sass、stylus

它們是三種類似的樣式動態(tài)語言，屬于css預(yù)處理語言，它們有類似css的語法，為css賦予了動態(tài)語言的特性、如變量、繼承、運算、函數(shù)等，這么做是為了css的編寫和維護。

它們使用的文件分別是：.less、.scss、.*styl，這些文件是不能再網(wǎng)頁上直接使用的，最終要編譯成css文件來使用，編譯的方法有軟件編譯，或者用nodejs程序。

less中文網(wǎng)址：http：//lesscss.cn/

less語法：

1、注釋

//不會被編譯的注釋

/*會被編譯的注釋*/

2、變量

@w:200px;

.box{

　　width:@w;

　　height:@w;

　　background:gold;

}

3、混合

4、嵌套

二、前端自動化

1、Node.js

可以理解為是一門后端腳本語言，使用了和JavaScript相同的語法，會使用JavaScript的程序員很快上手node.js、node.js在處理高并發(fā)方面性能卓越，目前許多公司都在使用node.js作為后端數(shù)據(jù)服務(wù)和前端開發(fā)的中間層、

node.js的中文網(wǎng)站：https：//nodejs.org/zh-cn/

2、前端自動化

前端開發(fā)的流程越來越復(fù)雜，其中有代碼的合并和壓縮、圖片的壓縮；對less、sass的預(yù)處理；文件操作等，這些工作是重復(fù)乏味的，為了優(yōu)化開發(fā)流程，提高工作效率，前端自動化工具就出現(xiàn)了，自動化工具可以通過配置，自動完成這些工作。

3、grunt、gulp

grunt和gulp是使用node.js編寫的，前端首選的自動化工具，gulp在書寫配置上比grunt更簡潔，運行的性能更高，gulp逐漸成為主流。

gulp網(wǎng)站:http://gulpjs.com

a、gulp的使用

gulp使用步驟：安裝nodejs（gulp賴以生存的環(huán)境）->全局安裝gulp->項目安裝gulp以及gulp插件->配置gulpfile.js->運行任務(wù)

全局安裝gulp（npm是nodejs里的包管理器）

在項目中安裝gulp

b、常用的gulp插件：

　　壓縮js代碼（gulp-uglify）

　　less的編譯（gulp-less）

　　css的壓縮（gulp-minify-css）

　　自動添加css3前綴（gulp-autoprefixer）

　　文件改名字（gulp-rename）

 安裝gulp-uglify插件、gulp-less插件、gulp-minify-css插件、gulp-autoprefixer插件、gulp-rename插件

less編譯

上面代碼執(zhí)行結(jié)果如下：

如果less編譯之后但未進行壓縮，結(jié)果如下：