什么是codeEasy?
codeEasy是一個基于Gulp的前端自動化構建工具,它能夠幫助前端開發人員更快的編輯代碼,通過gulp的監視功能,能夠實時監控文件的變化并進行更新。目前codeEasy支持html壓縮,css壓縮,sass,CSS自動添加前綴、精靈圖,js壓縮,后續將添加更多新功能,敬請期待...
準備工作
首先你需要在本機安裝node.js,安裝成功后,你可以去github克隆本項目(地址在這里,感謝大家star)。項目clone完畢后,在項目根目錄打開CMD,然后我們將npm轉換成淘寶鏡像,輸入以下命令?
npm install -g cnpm --registry=https://registry.npm.taobao.org?
以后用cnpm 代替npm命令即可。
正式開始
在項目根目錄打開cmd,輸入cnpm install ? 即可自動安裝本項目的依賴。
安裝成功后,輸入gulp dev ?開始構建,你會發現根目錄在生成了build目錄,然后 我們最好使用nginx來做為本地開發服務
下載好后,解壓到磁盤中,打開/nginx/conf/nginx.conf,進行下面的修改
修改完畢后,雙擊nginx.exe 你會發現界面一閃而過,然后打開瀏覽器,輸入localhost/demo.html,如果看到以下畫面 ?恭喜你,配置成功啦。
一些注意點:
1.目錄結構:項目代碼放在src下面,html放在view里面,圖標放在images里面,支持多級目錄,注意引用時應該寫build的路徑,放入工作項目中只需要把build目錄里面的代碼放進去即可。
2.gulp會自動檢測在src/images/下的圖片,并生成精靈圖,同時精靈圖相關的樣式sprite.css在/assets/images/目錄下,比如有個圖標被命名為‘subBtn’,那么該css類 就是 ?'.icon-subBtn',自動生成的類已經定義了圖標的寬高,如果你用一個行內元素,那么僅需要再加個類,讓它變成block或inline-block即可。(具體可看demo.html)
3.生成的js文件是經過壓縮的,會在原來的基礎上加上后綴' .min',引用js的時候需要注意。
4.不需要寫廠商前綴,里面已經有插件幫我們做了。
5.如果你需要增加一些新功能,那么請在/gulp/tasks/下載自行編寫任務,然后在watch.js,develop.js中添加相應的任務即可。
項目github:? https://github.com/yangzhennupt/codeEasy ? 歡迎大家star,這是我學了gulp之后自己搭建的第一個腳手架,希望大家多多支持,有任何問題或需要添加的功能請指出,我會持續更新。