{"id":20619719,"url":"https://github.com/twtrubiks/gulp-beginners-guide","last_synced_at":"2025-06-19T19:41:04.917Z","repository":{"id":60419429,"uuid":"76153982","full_name":"twtrubiks/Gulp-Beginners-Guide","owner":"twtrubiks","description":"Gulp 基本教學 - 從無到有 Gulp-Beginners-Guide","archived":false,"fork":false,"pushed_at":"2018-03-27T03:18:11.000Z","size":7,"stargazers_count":37,"open_issues_count":1,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T12:02:13.171Z","etag":null,"topics":["beginners","browsersync","guide","gulp","gulpfile","npm","tutorial"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twtrubiks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-11T04:25:09.000Z","updated_at":"2025-04-08T09:32:11.000Z","dependencies_parsed_at":"2022-09-29T09:50:17.783Z","dependency_job_id":null,"html_url":"https://github.com/twtrubiks/Gulp-Beginners-Guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/twtrubiks/Gulp-Beginners-Guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FGulp-Beginners-Guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FGulp-Beginners-Guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FGulp-Beginners-Guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FGulp-Beginners-Guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twtrubiks","download_url":"https://codeload.github.com/twtrubiks/Gulp-Beginners-Guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FGulp-Beginners-Guide/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260818655,"owners_count":23067746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beginners","browsersync","guide","gulp","gulpfile","npm","tutorial"],"created_at":"2024-11-16T12:12:21.873Z","updated_at":"2025-06-19T19:40:59.902Z","avatar_url":"https://github.com/twtrubiks.png","language":"JavaScript","readme":"# Gulp 基本使用教學:memo:\n因為小弟覺得這東西非常實用，所以就簡單寫個教學文，順便記錄一下:memo:，希望能幫助想學的人:smile:\n\n如果教學有誤再請糾正:sweat_smile:\n\n影片介紹 [Gulp基本教學 - 從無到有 Gulp-Beginners-Guide](https://youtu.be/2XPn19EKYcw)\n\n## Gulp 介紹\n\n[Gulp](http://gulpjs.com/) 官網\n\n大家可能有聽過 [Grunt](http://gruntjs.com/) ，也可能沒聽過，但沒關係，基本上，\n\n[Grunt](http://gruntjs.com/) 和 [Gulp](http://gulpjs.com/) 類似，都是前端自動化的工具，\n\n[Grunt](http://gruntjs.com/) 是很久以前就出來了，而 [Gulp](http://gulpjs.com/) 則是後期才出來的，\n\n但因為 [Gulp](http://gulpjs.com/) 更潮、更方便，所以漸漸用 [Gulp](http://gulpjs.com/) 的人比較多，\n\n如果你有使用 [yeoman](http://yeoman.io/)，建模出來的版型也已經是附加 \u003cb\u003egulpfile.js\u003c/b\u003e ，而不是 \u003cb\u003egruntfile.js\u003c/b\u003e ，\n\n所以，我們就直接學 [Gulp](http://gulpjs.com/) 吧 :smiley:\n\n\n## 前置安裝作業 - 安裝 node.js\n\n因為我們需要使用 npm ( Node Package Manager )，而他是 Node.js 的套件（package）管理工具，\n\n所以我們必須先安裝 \u003cb\u003enode.js\u003c/b\u003e，請先到 [Node.js](https://nodejs.org/en/) 官網，下載後安裝即可，如何確認是否安裝成功呢 ?\n\n在 cmd (命令提示字元) 輸入\n\n```\nnode -v\n```\n如果有跑出 node.js 版本號代表安裝成功，如下圖\n\n![alt atg](http://i.imgur.com/EQ7MnfL.png)\n\n## 開始使用 Gulp\n\n參考 [gulpjs](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) 官網教學\n\n使用 cmd (命令提示字元) 輸入以下指令\n\n```\nnpm install --global gulp-cli\n```\n\n接著在目標資料夾底下初始化\n```\nnpm init\n```\n\n會要你輸入一些資料，如不想設定直接按 Enter\n\n![alt atg](http://i.imgur.com/uCuLV1L.png)\n\n在目標資料夾底下，會多出 \u003cb\u003epackage.json \u003c/b\u003e\n\n在專案底下安裝 Gulp，請使用 cmd (命令提示字元) 輸入以下指令\n```\nnpm install --save-dev gulp\n```\n\n建立一個名稱為 \u003cb\u003egulpfile.js\u003c/b\u003e 的檔案，並在 gulpfile.js 裡輸入下方程式碼\n```\nvar gulp = require('gulp');\n\ngulp.task('default', function() {\n  console.log(\"hello gulp ~!\")\n});\n```\n\n接著在目標資料夾底下使用  cmd (命令提示字元) \n```\ngulp default\n```\n\n使用任務 task 方法\n```\ngulp \u003ctask\u003e\n```\n\n如果你可以順利的看到 hello gulp ~! ，如下圖，就代表你成功了 :satisfied:\n\n![alt tag](http://i.imgur.com/L4ydedN.png)\n\n## Plugins\n\n在 [Gulp plugins](http://gulpjs.com/plugins/) 目前有 2775 的套件可以使用，在這裡介紹幾個給大家~\n\n#### gulp-uglify \n\n請參考 [gulp-uglify](https://github.com/terinjokes/gulp-uglify)\n\n目的 : 壓縮 javascript ，最小化 javascript\n\n在專案底下安裝 gulp-uglify，請使用 cmd (命令提示字元) 輸入以下指令\n```\nnpm install --save-dev gulp-uglify\nnpm install --save-dev pump\n```\n\n這時候可以先到 \u003cb\u003epackage.json \u003c/b\u003e底下看，你會發現多出一些東西，如下圖\n\n![alt tag](http://i.imgur.com/uH6JXRZ.png)\n\n接著到 \u003cb\u003egulpfile.js\u003c/b\u003e 裡面輸入下方程式碼\n```\nvar gulp = require('gulp');\nvar uglify = require('gulp-uglify');\nvar pump = require('pump');\n\ngulp.task('compress', function (cb) {\n  pump([\n        gulp.src('script/*.js'),\n        uglify(),\n        gulp.dest('dist')\n    ],\n    cb\n  );\n});\n```\n\n接著在目標資料夾底下使用  cmd (命令提示字元) \n```\ngulp compress\n```\n如果順利成功，目標資料夾底下會多出 \u003cb\u003edist\u003c/b\u003e 資料夾，這資料夾裡面會有壓縮完的結果。\n\n![alt tag](http://i.imgur.com/AAJ3EHz.png)\n\n#### gulp-jshint\n\n請參考 [gulp-jshint](https://github.com/spalger/gulp-jshint)\n\n目的 : 檢查 javascript 是否有錯誤\n\n在專案底下安裝 gulp-jshint，請使用 cmd (命令提示字元) 輸入以下指令\n```\nnpm install --save-dev jshint gulp-jshint \n```\n\n建議多安裝一個套件，美化格式\n請參考 [jshint-stylish](https://github.com/sindresorhus/jshint-stylish)\n```\nnpm install --save-dev jshint-stylish\n```\n\n接著到 \u003cb\u003egulpfile.js\u003c/b\u003e 裡面輸入下方程式碼\n```\nvar jshint = require('gulp-jshint');\nvar gulp   = require('gulp');\n\ngulp.task('lint', function() {\n  return gulp.src('script/*.js')\n    .pipe(jshint())\n    .pipe(jshint.reporter('jshint-stylish'));\n});\n```\n\n接著在目標資料夾底下使用  cmd (命令提示字元) \n```\ngulp lint\n```\n![alt tag](http://i.imgur.com/Lytfat2.png)\n\ngulp-jshint 會和你說你的 js 有哪些部份需要修改\n\np.s 有時候你可能會看到 \u003cb\u003etoo many errors\u003c/b\u003e 導致你看不到全部的錯誤，這時候可以使用以下方法。\n\n先在 cmd (命令提示字元) 輸入以下指令建立檔案\n```\ntouch .jshintrc\n```\n\n再將下列程式碼輸入到 \u003cb\u003e.jshintrc\u003c/b\u003e 裡面\n```\n{\n    \"maxerr\" : 999\n}\n```\n這樣就可以解決  \u003cb\u003etoo many errors\u003c/b\u003e 的問題。\n\n#### gulp-htmlmin\n\n請參考 [gulp-htmlmin](https://github.com/jonschlinkert/gulp-htmlmin)\n\n目的 : 壓縮 html \n\n在專案底下安裝 gulp-jshint，請使用 cmd (命令提示字元) 輸入以下指令\n```\nnpm install --save-dev gulp-htmlmin \n```\n接著到 \u003cb\u003egulpfile.js\u003c/b\u003e 裡面輸入下方程式碼\n```\nvar gulp = require('gulp');\nvar htmlmin = require('gulp-htmlmin');\n\ngulp.task('minify', function() {\n  return gulp.src('html/*.html')\n    .pipe(htmlmin({collapseWhitespace: true}))\n    .pipe(gulp.dest('dist'));\n});\n```\n\n接著在目標資料夾底下使用  cmd (命令提示字元) \n```\ngulp minify\n```\n![alt tag](http://i.imgur.com/DkeZpyT.png)\n\n如果順利成功，目標資料夾底下會多出 \u003cb\u003edist\u003c/b\u003e 資料夾，這資料夾裡面會有壓縮完的結果。\n\n\n#### del \n\n請參考 [delete-files-folder](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md)\n\n目的 : 刪除指定文件，通常我們在建立自動化 task 之前，都會先執行清空資料夾\n\n在專案底下安裝 del，請使用 cmd (命令提示字元) 輸入以下指令\n```\nnpm install --save-dev del\n```\n接著到 \u003cb\u003egulpfile.js\u003c/b\u003e 裡面輸入下方程式碼\n```\nvar gulp = require('gulp');\nvar del = require('del');\n\ngulp.task('clean', function () {\n  return del(['dist']);\n});\n\n```\n\n接著在目標資料夾底下使用  cmd (命令提示字元) \n```\ngulp clean\n```\n![alt tag](http://i.imgur.com/emEvfbS.png)\n\n如果順利成功，目標資料夾 \u003cb\u003edist\u003c/b\u003e 會被刪除。\n\n## Gulp 一次執行全部 task 任務\n\n每次都要執行\n\n```\ngulp \u003ctask\u003e\ngulp lint\ngulp minify\n```\n雖然很簡單，但很煩 :persevere:，有辦法一次執行全部 task 任務呢 ?\n\n是可以的 !!!\n\n請到 \u003cb\u003egulpfile.js\u003c/b\u003e 裡面輸入下方程式碼\n\n```\ngulp.task('run-all-task',[\"default\",\"clean\",\"compress\",\"lint\",\"minify\"]);\n```\n\n上面這段程式碼的意思是，先執行 default ，再執行 clean ，再執行 compress....\n\n順序， default \u003e clean \u003e compress \u003e  minify\n\n接著在目標資料夾底下使用  cmd (命令提示字元) \n```\ngulp run-all-task\n```\n![alt tag](http://i.imgur.com/PgOxIoR.png)\n \n一次幫你執行全部 task 任務 :kissing_smiling_eyes:\n\n## npm 一次安裝全部需要的套件\n\n每次也都要執行\n```\nnpm install --save-dev del\nnpm install --save-dev gulp-htmlmin \nnpm install --save-dev jshint-stylish\nnpm install --save-dev jshint gulp-jshint\n```\n雖然很簡單，但也很煩 :persevere:，有辦法一次全部安裝嗎 ?\n\n是有的 !!!\n\n這時候可以先到 \u003cb\u003epackage.json \u003c/b\u003e底下輸入你要安裝的套件，如下圖\n\n![alt tag](http://i.imgur.com/vcGo6Wr.png)\n\n接著輸入以下指令\n```\nnpm install --save-dev\n```\n ![alt tag](http://i.imgur.com/lEUPeOR.png)\n \n一次就會安裝全部的套件 ! ! :satisfied:\n\n## 其他 Plugins 推薦\n\n#### gulp-clean-css\n\n請參考 [gulp-clean-css](https://github.com/scniro/gulp-clean-css)\n\n目的 : 最小化 CSS 、 minify CSS。\n\n#### gulp-notify\n\n請參考 [gulp-notify](https://github.com/mikaelbr/gulp-notify)\n\n目的 : 有時候專案很大，自動化需要一段時間執行，可以透過 gulp-notify ，當執行完畢後，\n\n他會跳出視窗告知你自動化已經執行完畢。\n\n#### gulp-imagemin\n\n請參考 [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin)\n\n目的 : 壓縮圖片。\n\n#### browser-sync\n\n請參考 [browser-sync](https://browsersync.io/)\n\n目的 : 瀏覽器同步檢視，簡單說，只要將 browser-sync run 起來，你的 html css js 有修改，你的網頁就會自動刷新，\n\n方便在多個不同的瀏覽器下觀看效果，不用再自己手動重新整理網頁。\n\n#### gulp-concat\n\n請參考 [gulp-concat](https://github.com/contra/gulp-concat)\n\n目的 : 合併檔案，例如，可以將 5(多) 個 CSS 檔案合併成一個 CSS 。\n\n## Donation\n\n文章都是我自己研究內化後原創，如果有幫助到您，也想鼓勵我的話，歡迎請我喝一杯咖啡:laughing:\n\n![alt tag](https://i.imgur.com/LRct9xa.png)\n\n[贊助者付款](https://payment.opay.tw/Broadcaster/Donate/9E47FDEF85ABE383A0F5FC6A218606F8)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fgulp-beginners-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwtrubiks%2Fgulp-beginners-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fgulp-beginners-guide/lists"}