跳到主要內容

發表文章

目前顯示的是 2016的文章

前端攻城屍自動化教學 1 (入門軟體篇, 使用 prepros)

大家好,我是奶綠茶
寫程式的最高原則,就是要"懶"
"懶"指的是 "雜事交由電腦幫你完成"
你就可以專心在程式面上
比如說:
uglifyjs JS 自動幫你把 JS 壓成一行
自動幫你轉 sass/ scss
程式碼一存檔,html 就自動 reload
如果這些事還要手動處理就真的麻煩了

新手可以直接使用現成的軟體
https://prepros.io/
這是一套永久免費的軟體(如果覺的好用也支持一下作者)
免費版和正式版的功能都一樣,差在免費版三不五時會貼心的提醒你要不要付費

1. 下載軟體, 支援 PC(不支援 XP ) 和 Mac
2. 安裝, 一直下一步下一步下一步
3. 啟動軟體



4. 把你的專案資料夾拉進 prepros

5. 點選你的 js 檔
可以看到有五個選項
Auto Compile:當你存檔時是否要自動編譯,當然是要打勾呀。
SourceMaps:產生 sourcemap 檔,通常會搭配下方的 UglifyJS。
Uglify JS:幫你把 js 壓縮成一行。
Convert ES6 to ES5:將 ES6 的語法自動轉成 ES6。
Mangle Variables:將非全域變數的名字打亂。
筆者通常都是全勾。



6. 點選你的 css 檔
AutoCompile:是否存檔自動編譯
AutoPrefixCSS:自動加入 css3的 -web-kit 等前綴字。
SourceMaps:產生 sourceMap檔。
CompressCSS:將 css 壓縮成一行
Enable Cssnext:這個我還沒認真研究


7. 點選你的 html,接下右鍵
可以看到一個 Live Preview This File
按下後會啟動一個 localhost 的網頁,之後只要有修改 js, css ,都會自動 reload

8. 加掛 Proxy
live reload 預設只能跑 html, 如果想要執行 php 或是 asp.net 的話
可以在設定裡面開啟 Live Preview Custom Server

9. 其他
Prepros 也整合了 FTP ,可以讓你方便的直接上傳檔案

轉載請註明出處
SourceCodeDownload

JavaScript Namespae(命名空間)

大家好,我是奶綠茶
今天來討論 JavaScript Namesapce 命名空間
首先來了解一下 JS 的變數命名原理
var myVar = "milkmidi"; // 我是其他的程式碼 // 我是其他的程式碼 // ... // 我是其他的程式碼 var myVar = 0;
可以發現 myVar 被宣告了二次
而後者變數會蓋掉前則
function 也是一樣的原理
function myFun(){ } // 我是其他的程式碼 // 我是其他的程式碼 // ... // 我是其他的程式碼 function myFun(){ // 蓋掉之前同名的 myFun 函式 }
當然自己寫的程式不會發生同變數/函式
但如果跟其他人一起 Team Work 時,難保別人寫的名稱和你一樣
為了避免互蓋的問題
所以我們引用了 Namespace 的方法
但 JS 並沒有真正的 Namespace
而且是 Object 來模擬
// 用 Object 來當 Namespace // 變數名稱就用自己的英文名來命名 var milkmidi = {}; milkmidi.myVar = "milkmidi"; milkmidi.myFun = function(){ } // 我是其他的程式碼 // 我是其他的程式碼 // ... // 我是其他的程式碼 var otherPartner = {}; otherPartner.myVar = "otherPartner"; otherPartner.myFun = function(){ } // 要呼叫自己寫的函式就用 milkmidi.myFun(); // 同事寫的就用 otherPartner.myFun();
這樣就可以決解彼此互蓋問題。

決解自己蓋自己的命名空間
為了開發方便
會把自己常用的 JS 依功能來分類
JS 命名空間也只是用Object變數來模擬,一樣會發生蓋掉的問題
// script a.js var milkmidi = {}; milkmidi.getTitle = function(){}; // script b.js var milkmidi = {}; milkmidi.doFBLogin = function(){}…

素材製作好工具 TexturePacker-4.x

大家好,我是奶綠茶
Flash 己經 byebye了
現在是 HTML5 時代
為了增加效能與載入速度
會把用到的素材圖片,壓成一大張
或是要製作成 SpriteSheet
現在 TexturePacker 4.x 推出來,來看看有什麼好用的新功能


把所有的圖片拉進來


奶綠我最常使用的是 CreateJS 和 PixiJS
選擇要輸出的格式,支援超多的啦


再按下 Publish
就會匯出你需要的格式,真的很方便
可以免費的下載使用
https://www.codeandweb.com/texturepacker
免費版會把你的一張圖更改掉,所以也只能用在教學或是測試
專案要用還是需要付費買一套的喔

TP:B65E3ECD
TP:B65E3ECD