跳到主要內容

Gulp Plugin


Gulp為前端開發的一個重要外掛,透過簡易的配置檔我們可以將開發過程中許多的.js、.css代碼進行合併及壓縮,甚至是sass的編譯、jsHint、LiveReload等功能也能藉由此外掛達到目標,此外也不必擔心效能問題,Glup透過Nodejs的串流讓建構更加快速。


一、安裝Gulp

二、基本外掛清單

 * 編譯 Sass(gulp-ruby-sass)
 * Autoprefixer(gulp-autoprefixer)
 * 縮小化(minify)CSS(gulp-minify-css)
 * JSHint(gulp-jshint)
 * 串接(gulp-concat)
 * 醜化(Uglify)(gulp-uglify)
 * 壓縮圖檔(gulp-imagemin)
 * 即時重整(LiveReload)(gulp-livereload)
 * 快取圖片,只有變更的圖檔才會壓縮處理(gulp-cache)
 * 通知更動(gulp-notify)
 * 清除檔案,有個乾淨的建構環境(del)


三、安裝外掛

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

四、建立gulpfile.js,並載入相關外掛

五、建立一個合併及最小化js任務來進行測試

六、接著我們嘗試livereload來觀察某些檔案,當檔案內容改變時自動刷新頁面。

接著網址列上輸入localhost:8080即可看到網頁內容,此時隨意修改js內程式碼儲存檔案後將自動刷新。


留言

這個網誌中的熱門文章

java西元民國轉換_各種不同格式

C#資料庫操作(新增、修改、刪除、查詢)

【Excel好好玩】 自己的資產自己管!善用Google Sheet來幫我們評估貸款

這次介紹的主題是關於Excel的貸款還款計畫試算,我們人生中總會遇到需要大筆金額的花費,但當資金不夠時就得進行貸款,而貸款之前如果我們能夠審慎評估,並分析自己的還款能力之後在進行凍作,相信風險會小很多,因此就自己動動手來使用Google Sheet進行試算吧! 基本資料 ● 貸款總額: 1000000 ● 貸款期數: 84月 ● 年利率: 2.11% ● 月利率: 0.18% P.S 月利率 = 年利率 / 12 重要函式 PMT : 這是Google Sheet內建的重要年金計算公式,我們可以善用這個公式來計算固定利率及期數的固定攤還本息。因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 動手做 首先我們在Excel表上列出我們的基本資料 圖片來源 其中月利率的部分就使用公式「=B4/12」 接著我們填上第一列的期數跟餘額 圖片來源 =B2 =B3 使用關鍵PMT函數來計算本息的部分 因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 -PMT(貸款利率(月利率), 貸款期數, 貸款總額) =-PMT($B$5,$B$3,$B$2) 圖片來源 計算利息 利息 = 貸款餘額 x 月利率 =B8*$B$5 圖片來源 計算本金 本金 = 本息 - 利息 =C8-D8 圖片來源 製作第二列餘額的部分 餘額的部分 = 上一期的餘額 - 上一期的本金 圖片來源 接著拖曳該兩列往下拉,即可查看每一期的利息與本金 圖片來源 結語 雖然市面上已經有很多貸款銀行都提供了試算功能,但如果我們想要進一步管理自己的資產時,就需要將每一期的金額給計算出來,因此才會將公式運用在Excel表,讓我們的資產管理表能夠結合負債,進一步評估我們理財行動的下一步,希望這樣的經驗可以幫助到正在理財道路上打拼的夥伴,讓我們透過有效的管理,幫助荷包長大吧! 喜歡撰寫文章的你,不妨來了解一下: Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入? 歡迎加入一起練習寫作,賺取知識,累積財富!