milkmidi Blog

大家好，我是奶綠茶 身為前端，每天最常打的指令就是 npm run start npm run build npm run 什麼的 在 Mac 可以方便的將指令設定別名縮寫 那 PC 上呢 ? 可以用 doskey ns=npm run start 但每次啟動 cmd 都要重新設定 可以透過以下方法整合到 vsCode 設定你的 ailases 奶綠我將檔案放在 E:\aliases.cmd @echo off doskey n=npm run $* doskey ns=npm run start doskey nb=npm run build doskey s=npm run start doskey b=npm run build 開啟 vsCode Settings.json, 加入以下設定 "terminal.integrated.shellArgs.windows": [ "/k", "e:\\aliases.cmd" ] 好了，這樣每次開啟 terminal 就可以有縮寫功能 轉載請註明出處

大家好，我是奶綠茶 今天來教大家如何申請一個無限免費速度又快的網頁空間 1 首先到  https://github.com/ 申請帳號(一直下一步，下一步，下一步) 2 到你的個人頁，切換上方的 tab 到 Repositories, 按下右鍵的 new 3 Repository name 一定要是這樣的格式 username.github.io 我的 github 網址是 github.com/milkmidi 那就要輸入 milkmidi.github.io 選擇 public, 這樣別人才看的到 private 有其他用途, 而且要付費才能使用 完成後按下 Create repository 5 安裝 SourceTree github 並不支援 FTP 或是網頁上傳，一定要透過指令碼 在這我們選用有圖型介面的軟體，方便大家學習 https://www.sourcetreeapp.com/ 下載並安裝 啟動後登入你的 github 帳號 6 clone 你的 github io 專案 右上角有個 Clone or download 點選後 複製 https 連結(不要選到 ssh ) 7 將 https 的連結貼到 SourceTree 8 上傳 html 到本機 github.io 資料夾，放一個 index.html 切換到 SourceTree, 這時會看到 Unstaged files 的欄位 選擇 Stage All 9 git 要求每次的 Commit, 都一定要打說明文字(好習慣) 輸入完成後，按下右邊的 Commit 10 發佈(Push)，這樣就完成啦 可以到你的 http://milkmidi.github.io/ 去查看檔案有沒有出來 其他 Commit 可以想像是做一個記錄，你可以很多的 Commit 最後再一次 Push 上去 github 原本是給程式設計師用的版本控管服務 免費版提供無限空間讓你放檔案，但一定要是 public 想要有私有的 Project ，就只能付費 github.io 只能放靜態檔案，php, aspx 服務並不支援。 祝大家學習愉快 轉載請註明出處 奶綠的 github.io S

大家好，我是奶綠茶 最近在 mac 上踩到一個雷 不知道在什麼情況下，文字會多出一個 backspace 元字 在 PC 上會出現一個黑圓點 偏偏 VSCode 預設是不會顯示( Sublime 會出現白底黑字的BS標示) 然後被包在 JS 裡的字串，一切就爆掉了。 解法 VSCode 在 View / Toggle Control Character 這樣該字元就會顯示一個小字的 BS

大家好，我是奶綠茶 今天來介紹如何使用 gulp 來自動化將圖片拼成 spritesheet 奶綠我使用的套件是 gulp.spritesmith https://www.npmjs.com/package/gulp.spritesmith 可以使用 handlebars 格式，拼出自己想要的 css 格式 {{#sprites}} .{{name}} { background-position: {{px.offset_x}} {{px.offset_y}}; width: {{px.width}}; height: {{px.height}}; background-image: url({{{escaped_image}}}); } {{/sprites}} gulp 的設定 gulp.task('sprite',()=>{ console.log('sprite'); const spriteData = gulp.src('src/sprite_src/*') .pipe(spritesmith({ imgName: '../img/sprite.png', cssName: '_sprite.css', padding: 4, imgOpts: { quality: 100 }, cssTemplate: 'src/css/handlebars/basic.handlebars', })); const imgStream = spriteData.img .pipe(buffer()) .pipe(gulp.dest('dist/img/')); const cssStream = spriteData.css .pipe(gulp.dest('src/css')); return merge(imgStream, cssStre

分享一下奶綠我在 2017 02 線上讀書會 主講 vuex , webpack 的影片 轉載請註明出處 Github Source Code

大家好，我是奶綠茶 上一篇 介紹了 webpack 的核心功能 loader 這篇再來補強各種常用的 loader css-loader：解悉 css 檔 extract-loader：這個有點難翻，下面會介紹 file-loader：存成實體的檔案, 如圖片 html-loader：解悉 html 檔 sass-loader：解悉 scss 檔 url-loader：解悉圖片路徑 webpack.config.js module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑，後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹 scss 在這要做多組合的應用 先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔 再過 css-loader 最後再過 style-loader { test: /\.scss$/, // 多個