iT邦幫忙

gulp相關文章
共有 84 則文章
鐵人賽 DevOps DAY 8

技術 Gulp 安裝與介紹

前言 從前面幾篇的介紹,我們有了持續整合伺服器(TeamCity)的協助,加上 NET Core 本身的指令,目前為止可以完成多數的工作。但在自動化過程中,我們...

鐵人賽 Modern Web DAY 10

技術 [試著把切版專案升級到 gulp4.0 吧] Day10 第一個插件:以複製檔案為例,談 node.js 的 stream 與 pipe()

在「以複製檔案為例」系列的第一天,曾經貼過這個範例 task: import gulp from 'gulp' export function copyHTM...

鐵人賽 Modern Web DAY 12

技術 可以幫我自動化嗎,拜託:Gulp

可以幫我自動化嗎,拜託:Gulp 在上一篇當中我們暫時脫離了瀏覽器跟前端,進入到 Node.js 的領域了。在這一篇裡面我們把主題拉回來前端。之前有介紹過 SC...

鐵人賽 Modern Web DAY 10
CSS 實戰心法 系列 第 10

技術 Gulp 與 Sass 開發環境

Gulp 是我目前最使用的自動化工具,在先前一篇也有介紹有哪些自動化工具,這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而...

徵才 【台北市】前端工程師(近捷運松江南京站)-APO

**我們需要您具備以下能力: 1、從事前端開發2年及以上,熟悉各種前端技術,包括HTML/CSS/JavaScript/Node.JS等2、具備跨終端的前端開發...

鐵人賽 Modern Web DAY 27

技術 <27 - 番外篇 01> webpack 與 gulp 聯手 - 安裝 gulp

寫到今天,其實應該都已經知道 webpack 是做什麼用的了,名副其實的 module bundler,就是將你的各種 assets 打包在一起,形成模組。...

鐵人賽 DevOps DAY 17

技術 IIS remote management : 變更站台實體路徑與移除舊有資料

前言 在前面六篇文章,我們介紹有關實作 Deploy 的方法與處理 CDN 環境下遭遇的問題。而在這一篇文章我們將要介紹最後一個步驟:變更站台實體路徑。如同先前...

鐵人賽 DevOps DAY 9

技術 Gulp 套件介紹

前言 上一篇我們簡單介紹如何安裝 Gulp 與其基本原理,並且提供了一個minify的範例。在一篇,我們將會介紹實作 NET Core 持續整合過程中前後端所需...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day35 佈署靜態網頁到 github pages

當網頁已經開發完成了,通常會想找個網路空間把網頁放上去,讓其他人輸入網址後就能在遠方看到網頁。網路雖然是自由的,但卻不是免費的,許多的網路空間都需要花錢錢才能使...

鐵人賽 Modern Web DAY 21

技術 21. [FE] 用過 Webpack 之類的打包工具嗎?為什麼需要?

隨著網頁技術不斷翻新,前端需要處理的事也就越來越繁雜;在 2016 年有一篇當時很紅的文章,詼諧的故事除了是技術名詞科普之外,同時也諷刺了前端技術的瘋狂增長,...

鐵人賽 Modern Web DAY 15

技術 [試著把切版專案升級到 gulp4.0 吧] Day15 HTML、EJS 的處理:談 HTML 樣板語言

在網頁開發領域發展的初期,前端和後端是沒分這麼開的。有些開發者直接把 HTML、CSS、JS 檔案放到後端語言裡頭(如 php);將這些檔案重新處理後,才傳給那...

鐵人賽 其他技術 DAY 29

技術 Day29– 前端小字典三十天【每日一字】– Grunt 與 Gulp

圖片來源 Grunt是什麼? 官方解釋: 「The JavaScript Task Runner」 Grunt是一個JavaScript的任務(Task)自...

鐵人賽 DevOps DAY 12

技術 Deploy : WebDeploy

前言 過去個人工作經驗,在多數專案中,測試、開發機(如:dev, qa, staging)通常會位於公司網域內,由 IT人員進行管理,但正式機(producti...

鐵人賽 Modern Web DAY 29

技術 <29 - 番外篇 03> webpack 與 gulp 聯手 - Stats 調校輸出訊息

今天是番外篇的最後一篇文章,其實到目前為止,也已經做到如何使用 gulp 來執行 webpack 了,只是還有一個小小的問題,我想做改良,也就是輸出的訊息。 在...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day31 邊開發邊看畫面變動:談 gulp.watch

邊開發邊看畫面變動:談 gulp.watch 想要達到邊開發邊看到畫面改動,有兩個比較重要的事情要做:一個是監控開發中的檔案是否有變動、另一個是建立一個暫時性的...

鐵人賽 Modern Web DAY 12
每日文章推薦 系列 第 12

技術 Day 12 前置編譯器

基本用途 我提到的主要都是覺得原本的語言提供的特性不夠用 所以會做出一套工具 來提供想要的功能 最後再編譯成原始的語言來讓環境可以直接套用 有哪些 javasc...

鐵人賽 DevOps DAY 11

技術 Deploy : Robocopy

前言 在.NET Core 安裝與介紹這個章節,提到了因為.NET Core 的特性,可以透過本身指令進行 Restore, Build, Test 與 Pub...

鐵人賽 Modern Web DAY 5

技術 [試著把切版專案升級到 gulp4.0 吧] Day05 來自 gulp 的 hello world:gulp4 寫法

在 Gulp4 中,task() API 已經不被推薦,改成用 function 定義 task。使用 function 定義 task 有個好處,就是如果該...

鐵人賽 Modern Web DAY 11
CSS 實戰心法 系列 第 11

技術 Gulp - 透過 PostCSS 加入 CSS Prefix

說到 CSS prefix 相信大家都不是很清楚當下主流版本的 prefix 有哪些是必要?又有哪些是不必要的? 以往都是使用 Sass 的 Compass 來...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] DAY 36 完賽心得

雖然在 2019.12.26 的時候就三十天完賽了,還不小心撿到個人組佳作,但我沒有什麼完賽的實感,因為覺得當時系列文還沒寫完。今天總算是勉強補完了 orz 這...

鐵人賽 Modern Web DAY 28

技術 <28 - 番外篇 02> webpack 與 gulp 聯手 - 整合 webpack-dev-server

在昨天的 &lt;27 - 番外篇 01&gt; webpack 與 gulp 聯手 - 安裝 gulp 文章當中,已經瞭解到如何整合 webpack 與 gu...

鐵人賽 DevOps DAY 13

技術 Deploy : FTP

前言 在前面的章節,我們介紹如何在 gulpfile 內安裝與使用 robocopy,並透過檔案同步方式實作 Deploy 工作。透過 robocopy 方式雖...

鐵人賽 DevOps DAY 14

技術 Deploy : Deploy to Azure CDN

前言 CDN - 內容傳遞網路,透過網路連結各地強大處理能力的伺服器,快速傳輸照片、音樂、文件...等檔案給使用者,提供快速、高傳輸性與低成本的服務,也成為現今...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day32 邊開發邊看畫面變動:談 browserSync

邊開發邊看畫面變動:談 browserSync 前端開發時除了看程式碼外,當然也會想看到目前的界面長得怎樣以便調整:即時的畫面回饋,能讓開發更方便。而 brow...

鐵人賽 Modern Web DAY 8

技術 [試著把切版專案升級到 gulp4.0 吧] Day08 第一個 task:以複製檔案為例,談 task、src、dest、watch API

在 gulp 3.9.1 的時候,有四個最常被使用的 gulp API,分別是 task()、src()、dest()、以及 watch()。其中,task()...

鐵人賽 Modern Web DAY 16

技術 [試著把切版專案升級到 gulp4.0 吧] Day16 HTML、EJS 的處理:談 gulp-front-matter 與 gulp-layout

在前天的文章中曾展示了如何將 ejs 模板語言轉成 HTML 的 gulp 流水線程式碼,今天將介紹兩個大功臣套件:gulp-front-matter 與 gu...

鐵人賽 Modern Web DAY 22

技術 [試著把切版專案升級到 gulp4.0 吧] Day22 CSS 的處理:談 sourcemap 與 gulp-sourcemaps

還記得我一開始學寫網頁的與 JS 的時候,就是在編輯器如 Sublime、VSCode 上把 HTML 與 JS 寫好,然後點擊 index.html 檔,看網...

鐵人賽 Modern Web DAY 6

技術 [試著把切版專案升級到 gulp4.0 吧] Day06 來自 gulp 的 hello world:JavaScript 模組化方案

在 day4、day5 用到的 require、import 等語法,其實就是 JavaScript 內建的模組化寫法。但其實 JavaScript 被創始之初...

鐵人賽 DevOps DAY 15

技術 Deploy : CDN Solution 1 - Hash and Replace

前言 CDN 的原意是透過節點與快取方式於增加網站的速度與穩定度,但在開發、維護專案的過程中,常常遭遇到更新javascript、css或圖片檔案後沒有作用的情...

鐵人賽 DevOps DAY 10

技術 TeamCity Agent 執行流程說明

前言 在這篇文章之前,我們介紹了 TeamCity, Net Core 與 Gulp 的安裝流程與基礎應用。接下來的章節將開始介紹Deploy tools與撰寫...