簡短的幾句js實現css壓縮和反壓縮功能

2022-01-17 22:28:05 字數 660 閱讀 8970

寫在前面

最近一直在整理css,但因為現在visual studio 2013太智慧型了,它每每在我按ctrl+e+d進行格式化**的時候,就會將css進行層次格式化(如下圖所示),而這個格式讓我老大實在無法忍受,我老大認為它實在是太浪費空間了。

那我應該怎麼辦呢,每次將本地**上傳之前都開啟另外乙個vs10,然後複製貼上,可是下次從伺服器拉下來**我一編輯,手癢一下就又變成上面這個鬼樣,折磨的我呀

剛剛看了豪情的一篇文章,  才發現有這麼簡單的方法來實現css的格式化,瞬間覺得弱爆了

css壓縮效果見下

壓縮**

格式(多行)

格式(單行)

還原**

大家可以點選上面的「壓縮**」、「格式多行」等按鈕試一下效果

js實現css壓縮及格式化原理

大家看到沒有,簡簡單單的幾句話,也就是利用正則將換行、tab鍵、空格等去掉來實現壓縮。

哎,發現自己太弱了,還是應該多跟園子裡的大神學習下。(寫這篇博文的意義還在於,原來讓自己的博文上出現介面展示效果其實原理也很簡單,只要把相關script和style插入到博文的html裡面就可以了

前端js和css的壓縮合併之grunt

package.json放在根目錄 例如 c users 123 下,它包含了該項目的一些元資訊,如專案名稱 描述 版本號,外掛程式等。grunt contrib jshint js語法檢查 grunt contrib concat js合併 grunt contrib uglify 採用uglif...

常用的css和js

css input ms input placeholder,textarea ms input placeholder input webkit input placeholder,textarea webkit input placeholder 小三角 main wrap icon t彈層高度...

使用CSS和Js實現時鐘效果

通過div和css構建時鐘的表盤和指標 通過css動畫實現指標跳動效果 通過js獲取時間,並設定初始值 效果如圖所示 具體 如下 lang en charset utf 8 使用css和js實現時鐘 title clock clock pan clock ge clock ge 0 clock ge...