【前端開發】最佳化代碼之減少引入，css先行編譯語言的優點，stylus的使用

標籤：http   file   參考   忘記   sse   efault   前端開發   color   應該   

前言：我必須得承認在最最最開始的時候，我對於css的先行編譯是非常不以為然的，這是錯誤的。一般在頁面編寫過程中，我會將需要reset的css放在reset.css中，講會需要重複用到的放置到public.css中，對於常用的幾個資料，例如字型font-10，font-12，font-24，font-36，對於margin來說margin-top-10，margin-bottom-10等等，這樣修改起來也非常方便，不過在看了（瞬間忘記了書名）以後，減少引入能夠最佳化頁面效能。

我們都知道，瀏覽器的工作原理，它向伺服器端發送請求，伺服器返回所請求的檔案，那麼顯然檔案越少越好。精靈圖就是為了減少用戶端向伺服器發送請求。

在css中將公用的css檔案複製到所需要的檔案中是極為耗時並且不方便的，使用先行編譯語言能夠解決這個問題，那麼在頁面引用中只需要引入當前頁面對應css檔案就可以了。

這裡順便介紹一下stylus先行編譯語言。

一、環境安裝

stylus的安裝依賴nodejs環境，因此需要先安裝nodejs環境，這個怎麼安裝在上篇中有寫到。

簡單帶過，就是進入nodejs官網，下載首頁顯示的最新版本，安裝，完成以後開啟cmd命令列，進入到目前的目錄檔案夾中。

二、stylus安裝

在控制台中輸入命令，npm install stylus -g

npm install stylus --save-dev

三、grunt構建工具和gulp構建工具

grunt比較複雜，這裡就只簡單介紹一下gulp，在上一篇介紹nodejs的部落格中應該有提到gulp自動化構建工具。這裡安裝完成以後，需要一個gulpfile.js檔案，在根目錄下直接輸入gulp會啟動default任務命令。你可以再寫一個default去調用，也可以在命令列輸入調用任務名。

var gulp = require(‘gulp‘);
var stylus = require(‘gulp-stylus‘);
gulp.task(‘stylus‘, function(){  return gulp.src(‘./assets/stylus/**/*.styl‘)  .pipe(stylus())  .pipe(gulp.dest(‘./assets/css‘));});

四、重要的文法

匯入：@import，（這就是我為什麼突然痛改前非的原因！！！！）

@import "reset.css"

可以匯入css可以匯入stylus，當沒有尾碼名的時候，會認為匯入的是stylus

@import"reset"

更多文法可以參考http://www.zhangxinxu.com/jq/stylus/import.php

【前端開發】最佳化代碼之減少引入，css先行編譯語言的優點，stylus的使用