tag gulp

標籤
貢獻21
68
08:08 PM · Nov 03 ,2025
joe_sky 頭像 icecreamlj 頭像 heiyanjing 頭像 tosmile 頭像 anetin 頭像 smile_58bd2c1f62ea0 頭像 alexz33 頭像 pines_cheng 頭像 gqkmiss 頭像 sysu_xuejia 頭像 whale_589d284a0713d 頭像 sishuiliunian_58b84718ea5de 頭像

@gulp / 博客 RSS 訂閱

daguaisou 頭像

Jerry - 【工程化】前端工程構建工具gulp篇

gulp ,基於 NodeJS 的項目，自動化構建的工具增強你的工作流程！ 一、工作原理 前端構建工具，gulp是基於Nodejs，自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。 借鑑了Unix操作系統的管道（pipe）思想，前一級

gulp , 前端工程化 , 前端構建 , 前端

收藏 評論

gqkmiss 頭像

月恆 - 使用 CRXJS 構建 Chrome 插件在 Chrome 瀏覽器升級到 130xxx 版本之後，出現CSP錯誤

使用 CRXJS 構建 Chrome 插件在 Chrome 瀏覽器升級到 130xxx 版本之後，出現 Content Security Policy 錯誤 一、前言 之前有個老哥找我寫了插件，到現在幾個月過去了，今天早上和我説 Chrome 瀏覽器報錯運行不起來了，但是 edge 瀏覽器沒問題。 就幫忙定位了下問題，發現是 Content Security Policy 的問題導致的報錯； 老

gulp , chrome , chrome-extension , 前端

收藏 評論

luchanan 頭像

芝士份子 - gulp-imagemin版本9圖片壓縮

由於網上大多數的博文已經比較久，參考性不大 版本 gulp PS D:\XXX\github\hexo gulp -v CLI version: 2.3.0 Local version: 4.0.2 gulp-imagemin 9.0.0 node PS D:\XXX\github\hexo node -v v20.10.0 PS D:\XXX\git

gulp

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - gulp來處理html、css、js資源啦

gulp 一般用於處理自動化任務，默認情況無法處理模塊化，也不會用於大型項目，但它可以使用各種插件來編譯 html、css、js 等資源。 不清楚如何使用 gulp 開啓任務的朋友可以參考 gulp使用指南 處理html 處理 html 資源使用到 gulp-htmlmin 這個插件，和 webpack中使用到的html-webpack-plugin 比較相似。 // gulpfile.js co

gulp , gulp-babel , webpack , 前端 , Javascript

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - gulp使用指南

gulp 是一個使用“流”來實現自動化的工具，正如 官方文檔 首頁展示的這副動圖一樣，以“流動”的狀態去處理 TypeScript、PNG、Markdown 資源。 與webpack比較 類別 webpack gulp 核心理念 module bundler task runner 執行任務 模塊化

gulp , webpack , 前端 , Javascript

收藏 評論

morimanong 頭像

末日碼農 - 用 rollup + gulp 造個輪子，別説還挺香

前戲 我是16年入了前端的坑，17年知道了gulp和rollup這兩個玩意兒。由於那時webpack勢頭很猛，便一直沒有正眼瞧過它一眼。 直到20年進了一家小公司，做了很多類似的小項目，相同的代碼拷來拷去，出現一個bug一堆項目都要改，實在噁心到我了。 於是不得不開始考慮將一些公共的方法和組件提取出來，做成一個第三方庫來維護。而在庫的封裝方面，rollup相對於webpack具有一定的優勢。 在此

gulp , rollup , typescript , 前端 , Javascript

收藏 評論

hello888 頭像

洛陽醉長安行 - 【從實戰帶你認識gulp】打包前端項目並實現防緩存

gulp是什麼？ 一個基於node的前端自動化任務構建工具，使用經典回調+鏈式調用的方式實現任務的自動化 (src.pipe(...).pipe)，gulp其實和webpack很相似，但是gulp側重點不同，gulp更側重前端流程自動化、任務執行（通過任務使開發提效），就像一條流水線。而webpack則是更側重用於打包前端資源，一切皆可打包成模塊。 官方文檔：https://www.gulp

gulp , 前端 , Javascript

收藏 評論

chencaize 頭像

點墨 - 使用gulp上傳打包文件到服務器

項目是使用create-app-rewired生成的react項目，使用gulp自動上傳打包文件到服務器，建議只在測試環境和模擬環境使用。 1.安裝gulp,gulp-ssh包 2.編寫腳本 3.修改config-overrides.js，將打包文件分環境生成 4.編寫gulp配置文件gulpfile.js const { src, task, series } = r

gulp , 部署 , 打包 , 前端 , Web

收藏 評論

heiyanjing 頭像

HeiYanjing - 一個gulp構建工作流案例

一個構gulp自動化構建工作流案例 需要對樣式文件，js文件，html文件，圖片字體文件，其他額外文件依次構建任務，並在此過程中實現對文件的壓縮合並 const { src, dest, series, parallel, watch, } = require('gulp'); const loadPlugins = require('gulp-lo

gulp , 構建工具

收藏 評論

heiyanjing 頭像

HeiYanjing - Gulp基本概念及應用

gulp簡介,基本使用 Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。 yarn add gulp 安裝gulp的時候會安裝gulp-cli。gulpfile.js中導出一個函數,最新的gulp中取消了同步代碼模式，每一個任務都是異步任務，最後需要調用回調函數或其他方式標記任務完成。如例子中如果沒有done，會報錯.如果任務名是default，運行時的命

gulp , 前端

收藏 評論

kayo5994 頭像

kayo5994 - Gulp 結構化最佳實踐

在 Gulp 的官方文檔中，Gulp 的任務都是寫在 gulpfile.js 這一個文件中的，如果任務數量不多，這並不會有什麼問題，但當任務數量較多時，會造成代碼可讀性差，難以維護，多人協作時還會容易造成衝突。因此，更好的處理方式是把 Gulp 的代碼結構化。 開始結構化 https://github.com/QMUI/qmui_web 這是一個前端框架，主要由一個 SASS 方法合集與內置的工作

gulp , 工程化 , 工作流

收藏 評論

pinmingxueqianduandelaji 頭像

bug之所措 - package.json的認識

前言 感覺這塊也是一個知識點，雖然我現在還不能系統的用xmind總結每個知識點的串聯關係，但是隻能看一個記一個了 package.json是什麼 我個人理解，package.json是描述包，管理包的一個信息json文件，給npm用的，比如你可以寫一個包，發到npm，那這個json就是記錄這個包的信息，或者對用vue腳手架開發的項目而言，它就是管理包的文件，npm install會讀這個文件的de

gulp , vue.js , 工程化 , npm , 前端

收藏 評論

tosmile 頭像

浪遏飛舟 - gulp構建react項目三：browserify處理jsx中模塊化問題

項目依賴模塊 目錄結構 gulp01 ├── src │ ├── components │ │ ├── Test │ │ | └── Test.jsx │ │ ├── Child │ │ | └── Child.jsx │ └── App.jsx ├── node_modules ├── index.js ├── gulpfile.js ├

gulp , browserify

收藏 評論

sishuiliunian_58b84718ea5de 頭像

跑碼 - Webpack與Grunt、Gulp的區別？

隨着前端發展如日沖天，前端項目也越來越複雜，得益於Nodejs的發展，前端模塊化、組件化、工程化也大勢所趨。這些年Grunt、Gulp到Webpack隨着工程化的發展都大行其道。 前端工程化的早期，主要是解決重複任務的問題。Grunt、Gulp就是其中代表。比如: 壓縮、編譯less、sass、地址添加hash、替換等。 Grunt官網中就説： 對於需要反覆重複的任務，例如壓縮（minificat

gulp , grunt , webpack

收藏 評論

jamie_520baby 頭像

Jamie_0912 - 使用 gulp + seajs + zepto 構建項目

最近使用gulp工具，將公司現有項目重新構建了下，有許多大改動，繞了許多坑，我不擅長表達，只能把我現在總結出的對的和比較深刻的應該注意的幾點記錄下來，免得以後自己都忘記了。 一，基本環境的搭建，安裝nodejs、npm。（給新手看得，會的直接跳過） 先下載安裝程序：http://nodejs.cn/download/ 1、Windows 安裝包(.msi)； 2、安裝msi，這裏最好使用管理

gulp , zepto , less , seajs

收藏 評論

whale_589d284a0713d 頭像

whale - 前端構建工具的區別與聯繫

前端自動化構建工具，我個人將其分為兩類：構建工具、模塊化工具。但由於模塊化工具的功能越來越豐富，兩者之間的界限也越來越模糊。 構建工具主要有：Gulp和Grunt 模塊化工具主要有：Webpack、Browserify，以及瀏覽器端的模塊化實現SeaJs、RequireJs 構建工具 Gulp：Gulp的處理過程，可以簡化為，以流的形式讀入文件 - 文件

gulp , browserify , seajs , webpack

收藏 評論

sysu_xuejia 頭像

陳學家_6174 - 精益 React 學習指南 （Lean React）- 2.3 gulp

書籍完整目錄 2.3 Gulp 在前端工程化中最重要的就是流程管理，借用 gulp 可以很方便的基於流的方式定義流程任務，並將任務串聯起來，本節中將詳細介紹 gulp ，包括： gulp 介紹 gulp 是什麼 gulp 能夠解決哪些問題 gulp 核心思想和特點 gulp 安裝

gulp , react , 前端工程化 , leanreact , 前端

收藏 評論

joe_sky 頭像

joe_sky - 基於 Gulp + Browserify 構建 ES6 環境下的自動化前端項目

隨着React、Angular2、Redux等前沿的前端框架越來越流行，使用webpack、gulp等工具構建前端自動化項目也隨之變得越來越重要。鑑於目前業界普遍更流行使用webpack來構建es6(ECMAScript 2015)前端項目，網上的相關教程也比較多；相對來説使用gulp來構建es6項目的中文教程就比較少。 經過一段時間的摸索，我覺得其實使用gulp也可以很方便地構建es6項目。以下

gulp , browserify , ecmascript-6 , node.js , Javascript

收藏 評論

linshuai 頭像

linshuai - gulp自動化壓縮合並、加版本號解決方案

雖然網上有很多的 gulp 構建文章，但是很多都已經隨着 gulp 插件的更新無法運行了。因此，我寫了這個比較簡單的構建方案。 如果還不熟悉gulp的插件，可以閲讀上一篇文章：精通gulp常用插件 這個方案主要是為了實現js/css的壓縮合並、自動添加版本號和壓縮html。 gulp-csso 壓縮優化css gulp-uglify 壓縮js gulp-html-

gulp , 構建工具 , 前端工具

收藏 評論

joe_sky 頭像

joe_sky - 如何在Gulp中提高Browserify的打包速度

使用Browserify打包js時如果項目變得越來越大，編譯時間就會相應變得越來越長。使用官方的插件watchify是個比較有效的提高速度方案。 提速原理 watchify的用法和gulp的watch方法比較類似，都是監控文件的改動來觸發一些操作。在gulp中我們可以把一個完整的任務拆分成很多個局部任務，然後使用gulp.watch對這些局部任務進行監聽，例如： gulp.task('build-

gulp , browserify , node.js , 自動化構建工具 , Javascript

收藏 評論

pines_cheng 頭像

Pines_Cheng - Gulp資料大全 入門、插件、腳手架、包清單

awesome-gulp中文版 一份gulp的資源，插件和使用實例清單， 致力於打造更好的前端工程構建流程。 資源 通用資源 官網 Github庫 插件註冊 NPM模塊 插件黑名單 官方文檔 快速開始 API文檔 CLI 文檔 開始寫一個插件 使用訣竅 組織 StackOverflow Twitter 入門教程 Gulp入門 使用Gulp構建前端工程 通過

gulp , 前端工程 , 打包 , awesome , 翻譯

收藏 評論

alexz33 頭像

白鯨魚 - 前端自動化工具

gulp/grunt yeoman bower 先看這兩篇文章 grunt gulp Grunt-beginner前端自動化工具

gulp , yeoman , 自動化構建工具 , bower , grunt

收藏 評論

smile_58bd2c1f62ea0 頭像

smile_58bd2c1f62ea0 - angular1配合gulp和bower使用

一 安裝gulp和bower gulp安裝: npm install -g gulp bower安裝: npm install -g bower ==注：== angularjs的一些包文件我們是通過bower來管理的 二 bower使用 使用bower初始化一個項目: bower init 填寫工程名，描述等等那些東西 安裝angularjs：bower install --save a

gulp , angularjs , bower , Javascript

收藏 評論

anetin 頭像

anetin - 使用gulp+bower構建Angular.js項目

本文重點是詳細介紹Angular.js項目的構建。gulp是優秀的自動化項目構建工具，我們將用它完成 javascript/less/css/html/images/fonts 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟(熱重載)。bower是項目依賴管理工具。 環境需求 gulp運行在nodejs環境，首先安裝nodejs。一般n

gulp , angularjs , bower , Javascript

收藏 評論