前端自動化

1、less、sass、stylus

它們是三種相似的樣式動態語言，屬於css預處理語言，它們有相似css的語法，爲css賦予了動態語言的特性、如變量、繼承、運算、函數等，這麼作是爲了css的編寫和維護。

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

less中文網址：http：//lesscss.cn/

less語法：

一、註釋

//不會被編譯的註釋

/*會被編譯的註釋*/

二、變量

@w:200px;

.box{

　　width:@w;

　　height:@w;

　　background:gold;

}

三、混合

四、嵌套

2、前端自動化

一、Node.js

能夠理解爲是一門後端腳本語言，使用了和JavaScript相同的語法，會使用JavaScript的程序員很快上手node.js、node.js在處理高併發方面性能卓越，目前許多公司都在使用node.js做爲後端數據服務和前端開發的中間層、

node.js的中文網站：https：//nodejs.org/zh-cn/

二、前端自動化

前端開發的流程愈來愈複雜，其中有代碼的合併和壓縮、圖片的壓縮；對less、sass的預處理；文件操做等，這些工做是重複乏味的，爲了優化開發流程，提升工做效率，前端自動化工具就出現了，自動化工具能夠經過配置，自動完成這些工做。

三、grunt、gulp

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

gulp網站:http://gulpjs.com

a、gulp的使用

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

全局安裝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編譯

 

上面代碼執行結果以下：

若是less編譯以後但未進行壓縮，結果以下：