{"action":"opened","issue":{"url":"https://api.github.com/repos/Hsinny/Note-Gulp/issues/1","repository_url":"https://api.github.com/repos/Hsinny/Note-Gulp","labels_url":"https://api.github.com/repos/Hsinny/Note-Gulp/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/Hsinny/Note-Gulp/issues/1/comments","events_url":"https://api.github.com/repos/Hsinny/Note-Gulp/issues/1/events","html_url":"https://github.com/Hsinny/Note-Gulp/issues/1","id":350643234,"node_id":"MDU6SXNzdWUzNTA2NDMyMzQ=","number":1,"title":"建立開發環境","user":{"login":"Hsinny","id":29328721,"node_id":"MDQ6VXNlcjI5MzI4NzIx","avatar_url":"https://avatars3.githubusercontent.com/u/29328721?v=4","gravatar_id":"","url":"https://api.github.com/users/Hsinny","html_url":"https://github.com/Hsinny","followers_url":"https://api.github.com/users/Hsinny/followers","following_url":"https://api.github.com/users/Hsinny/following{/other_user}","gists_url":"https://api.github.com/users/Hsinny/gists{/gist_id}","starred_url":"https://api.github.com/users/Hsinny/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Hsinny/subscriptions","organizations_url":"https://api.github.com/users/Hsinny/orgs","repos_url":"https://api.github.com/users/Hsinny/repos","events_url":"https://api.github.com/users/Hsinny/events{/privacy}","received_events_url":"https://api.github.com/users/Hsinny/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-08-15T00:29:38Z","updated_at":"2018-08-15T00:29:38Z","closed_at":null,"author_association":"OWNER","body":"# Gulp - 自動化和增強您的工作流程 - 180813 - 未整理\r\n\r\n\r\n---\r\n\r\n### Gulp 功能\r\n* sass轉css\r\n* es6程式碼轉成瀏覽器可支援的\r\n* 壓縮檔案(css/js/圖片)\r\n* ....\r\n\r\n---\r\n###### 章節：1\r\n\r\n### Gulp 建立開發環境\r\n1. 安裝 node.js\r\n1. 安裝一下 gulp \r\n\r\n\r\n#### 在命令提示字元：\r\n\r\n1. `node -v` 看node版本\r\n2. `npm -v`  看npm版本\r\n3. `npm install gulp -g` ( -g* 安裝全域 gulp，每台電腦僅需執行一次 )\r\n4. `gulp -v` 看 CLI 版本\r\n5. 選擇專案資料夾，並將終端機路徑指向此處\r\n6. `npm install` ( 安裝所需套件 ( 在目標資料夾下，每個專案只有第一次需要執行 ) )\r\n7. `npm init`，會產生一個package.json檔案，裡面有些基本設定，用來控管專案資料夾內的 npm 套件。\r\n![](https://i.imgur.com/zhauZPp.jpg)\r\n\r\n8. `npm install 套件名稱 --save`，將套件資訊儲存於 package.json，並產生 node_modules 資料夾，裡面包含許多 npm 的相依套件，一般不會去對  node_modules 的檔案進行編輯。\r\n![](https://i.imgur.com/4o34pei.jpg)\r\n9. 刪除 node_modules 資料夾，再次安裝 `npm install`，\r\n    會自動將 package.json 的套件資訊安裝到 node_modules 內( 同時也產生 node_modules 資料夾 )，並抓出 package.json 內的資料(套件名稱)，自動進行安裝，這樣執行的好處是，在不同電腦或是協同開發者，開發套件不需要一個一個去安裝。\r\n\r\n10. 進行開發，舉例：新增 source 資料夾 / 隨意建立一個檔案，這邊用 index.html\r\n\r\n11. 新增 gulpfile.js，檔案內容：\r\n```javascript=\r\nvar gulp = require('gulp');              // (1)\r\n\r\ngulp.task('copyHTML', function(){        // (2)\r\n  return gulp.src('./source/**/*.html')  // source 內所有的子資料夾 (/**) 的 html 檔案\r\n    .pipe(gulp.dest('./public/'))\r\n})\r\n```\r\n* (1) 引入 gulp 工具\r\n* (2) 定義一個任務 task，此 task 任務是將 html copy 至另一處；\r\n      `gulp.src('資料來源')`\r\n      `gulp.pipe()` 水管傳送的概念\r\n      `gulp.dest('輸出目的地')`\r\n      `gulp.watch()` 監聽任務內的變化而執行函式(補充)\r\n\r\n\r\n    \r\n12. `gulp copyHTML`，在命令提示字元輸入剛設定的任務名稱來執行任務\r\n\r\n![](https://i.imgur.com/M5Tzuky.jpg)\r\n\r\n\r\n\r\n---\r\n\r\n#### *`npm install gulp -g` ( 安裝全域 gulp，每台電腦僅需執行一次 )\r\n\r\n- 有加入 \"-g\"：這是安裝全域的套件\r\n  也就是安裝在目前的電腦上\r\n  目的是啟用 \"gulp\" 這個指令\r\n\r\n- 沒有加入：這是 local 套件安裝的指令\r\n  是裝在目前的專案資料夾內\r\n  目的是執行 gulp 時可以取用的套件\r\n\r\n<br>\r\n\r\n總結：只有 npm install gulp -g  才會使用到全域的指令\r\n在教學中， -g 也只會出現一次喔～\r\n\r\n其餘 gulp 套件只會用到 \"npm install --save\"，像是\r\n\r\n`npm install gulp --save`，gulp 這個套件在專案資料夾也需要載入一次喔\r\n`npm install gulp-jade --save`，其它套件都不會用到 -g\r\n\r\n\r\n---\r\n## gulp-jade\r\n\r\n* [gulp-jade 文件](https://www.npmjs.com/package/gulp-jade)\r\n\r\n#### ( 複習前面步驟 )\r\n1. 先建置開發環境：安裝 node.js & npm\r\n2. 安裝 npm 內的 gulp\r\n   `npm install gulp -g` ( -g* 安裝全域 gulp，每台電腦僅需執行一次 )\r\n3. 控管專案資料夾內的 npm 套件\r\n   `npm init`，會產生一個package.json檔案，裡面有些基本設定，用來控管專案資料夾內的 npm 套件。\r\n4. `npm install 套件名稱 --save`，將套件資訊儲存於 package.json，並產生 node_modules 資料夾，裡面包含許多 npm 的相依套件，一般不會去對  node_modules 的檔案進行編輯。\r\n\r\n5. 進行開發：新增 gulpfile.js\r\n\r\n\r\n### Install 安裝\r\n```\r\nnpm install gulp-jade --save\r\n```\r\n這樣可將套件存進 package.json\r\n![](https://i.imgur.com/mGsnUfX.jpg)\r\n\r\n\r\n### Basic Usage 基本用法\r\n\r\n\r\n---\r\n\r\n\r\n## gulp-sass\r\n\r\n* [gulp-sass 文件](https://www.npmjs.com/package/gulp-sass)\r\n\r\n### Install 安裝\r\n```\r\nnpm install gulp-sass --save-dev\r\n```\r\n\r\n### Basic Usage 基本用法\r\n\r\n<br>\r\n\r\n---\r\n* #### `--save` & `--save-dev`的差別\r\n  選擇使用哪個，則看正式環境有沒有用到 gulp。\r\n\r\n    | 指令      | 說明        | \r\n    | -------- | ----------- | \r\n    | `--save` | 在正式環境使用 | \r\n    | `--save-dev` | 在開發環境使用 | \r\n\r\n\r\n  安裝好後，兩者在 package.json 內有點不一樣，看需要在哪個環境使用，重新輸入指令安裝即可切換。\r\n![](https://i.imgur.com/QZQn4QY.jpg)\r\n  \r\n    ##### (左圖) Install gulp-sass\r\n    ```\r\n    npm install gulp-sass --save-dev\r\n    ```\r\n    ##### (右圖) Install [gulp-load-plugins](https://www.npmjs.com/package/gulp-load-plugins) 套件\r\n    ```\r\n    npm install --save-dev gulp-load-plugins\r\n    ```\r\n    \r\n<br>    \r\n\r\n---\r\n    \r\n# Gulp - 自動化和增強工作流程\r\n\r\n1. 先建置開發環境：安裝 node.js & npm\r\n2. 安裝 npm 內的 gulp\r\n   `npm install gulp -g` ( -g* 安裝全域 gulp，每台電腦僅需執行一次 )\r\n3. 控管專案資料夾內的 npm 套件\r\n   `npm init`，會產生一個package.json檔案，裡面有些基本設定，用來控管專案資料夾內的 npm 套件。\r\n4. `npm install gulp --save`，將套件資訊儲存於 package.json，並產生 node_modules 資料夾，裡面包含許多 npm 的相依套件，一般不會去對  node_modules 的檔案進行編輯。\r\n\r\n5. 進行開發：新增 gulpfile.js\r\n   舉例使用 jade Template Language，安裝 gulp-jade npm， \r\n   ###### 指令參照使用文件 [gulp-jade](https://www.npmjs.com/package/gulp-jade)\r\n   ```\r\n   npm install gulp-jade --save\r\n   ```\r\n   這樣可將套件存進 package.json\r\n<br>\r\n\r\n6. 新增 source 資料夾，撰寫的檔案放此資料夾\r\n7. 新增 gulpfile.js，引入 gulp & gulp-jade\r\n   ###### 程式碼參照使用文件 [gulp-jade](https://www.npmjs.com/package/gulp-jade) \r\n   \r\n8. `gulp jade` 終端機執行 jade 套件任務，會從 gulpfile.js 內指定路徑的檔案(*.jade)，去執行套件，並將結果存至目的地資料夾\r\n9. gulpfile.js 的 jade 任務加入 pretty: true，編譯完在 public 的 HTML 會展開，非壓縮版。\r\n10. gulp.src('./source/*.jade') 修改成 gulp.src('./source/**/*.jade') ，會針對所有子資料夾做編譯\r\n<br>\r\n\r\n---\r\n# Gulp-sass 流程\r\n\r\n1. npm init\r\n2. npm install gulp --save\r\n3. npm install gulp-sass --save\r\n4. 建立 source/sass 資料夾\r\n5. 新增 gulpfile.js\r\n6. 引入 gulp-sass，指令參考 [官方文件](https://www.npmjs.com/package/gulp-sass) \r\n7. 執行 gulp sass，在目的地資料夾產生編譯檔案.css\r\n```javascript=\r\ngulp.task('sass', function () {\r\n  return gulp.src('./source/sass/**/*.sass')    // gulp.src(來源資料夾)  加入/** => 針對所有子資料夾做編譯\r\n    .pipe(sass().on('error', sass.logError))\r\n    .pipe(gulp.dest('./public/css'));           // gulp.dest(目的地資料夾)\r\n});\r\n```\r\n<br>\r\n\r\n8. 加入 gulp.task watch 監聽，來源資料夾內的 sass 檔案若有異動，即執行 sass 編譯\r\n```javascript=\r\ngulp.task('watch', function() {\r\n  gulp.watch('./source/sass/**/*.sass', ['sass']);\r\n});\r\n```\r\n<br>\r\n\r\n9. default 預設 gulp 的任務，執行 gulp 會依序執行裡面的 sass、watch...  \r\n```javascript=\r\ngulp.task('default', ['sass', 'watch']);\r\n```\r\n<br>\r\n\r\n10. 引入 gulp-plumber [(官方文件)](https://www.npmjs.com/package/gulp-plumber)，讓執行的任務內容若有錯誤不會停止\r\n```javascript=\r\nvar plumber = require('gulp-plumber');\r\n\r\ngulp.task('sass', function () {\r\n  return gulp.src('./source/sass/**/*.sass')\r\n    .pipe(plumber())  // .pipe(plumber())加入到 .scr(來源資料夾)的後面\r\n    ...\r\n});\r\n\r\n```\r\n```\r\nnpm install --save gulp-plumber\r\n```\r\n<br>\r\n\r\n### gulp-postcss\r\n可以載入大量插件，Autoprefixer 是其中一個\r\nhttps://www.npmjs.com/package/gulp-postcss\r\n\r\n```\r\nnpm install --save gulp-postcss\r\n```\r\n```javascript=\r\nvar postcss = require('gulp-postcss');\r\n...\r\n.pipe(postcss(plugins)) \r\n```\r\n\r\n<br>\r\n\r\n### gulp-autoprefixer\r\npostcss 的延伸套件，自動添加前輟詞，可選瀏覽器版本\r\nhttps://www.npmjs.com/package/gulp-autoprefixer\r\n\r\n```\r\nnpm install --save gulp-autoprefixer\r\n```\r\n```javascript=\r\nconst autoprefixer = require('gulp-autoprefixer');\r\n\r\ngulp.task('sass', function () {\r\nvar plugins = [\r\n  autoprefixer({ browsers: ['last 1 version']})\r\n];\r\n...\r\n  \r\nreturn gulp.src('./source/sass/**/*.sass') \r\n  .pipe(plumber())                          \r\n  .pipe(sass().on('error', sass.logError))\r\n   // 到這邊已編譯好轉成 CSS\r\n  .pipe(postcss(plugins))   \r\n  ...\r\n```\r\n<br>\r\n\r\n---\r\n\r\n## 終端機指令\r\n* 離開正在執行的任務 control + C\r\n<br>\r\n\r\n---\r\n\r\n## 套件列表\r\ngulp-jade\r\n- HTML 樣板語言\r\nhttps://www.npmjs.com/package/gulp-jade\r\n\r\ngulp-sass\r\n- 強大的 CSS 預處理器\r\nhttps://www.npmjs.com/package/gulp-sass\r\n\r\ngulp-plumber\r\n- 讓 Gulp 在運行的過程中遇錯不會中斷\r\nhttps://www.npmjs.com/package/gulp-plumber\r\n\r\ngulp-postcss\r\n- 強大的 CSS 後處理器\r\nhttps://www.npmjs.com/package/gulp-postcss\r\n\r\nautoprefixer\r\n- 自動為你的 CSS 補上前綴詞\r\nhttps://www.npmjs.com/package/autoprefixer\r\n\r\ngulp-load-plugins\r\n- 簡化 gulp 載入流程\r\nhttps://www.npmjs.com/package/gulp-load-plugins\r\n\r\ngulp-babel\r\n- JavaScript ES6 編譯工具\r\nhttps://www.npmjs.com/package/gulp-babel\r\n\r\nbabel-preset-es2015\r\n- JavaScript ES6 編譯工具\r\nhttps://www.npmjs.com/package/babel-preset-es2015\r\n\r\ngulp-sourcemaps\r\n- 標示壓縮、合併程式碼的原始位置\r\nhttps://www.npmjs.com/package/gulp-sourcemaps\r\n\r\ngulp-concat\r\n- 合併串接程式碼\r\nhttps://www.npmjs.com/package/gulp-concat\r\n\r\nBrowser Sync\r\n- 前端愛用的 Web Server\r\n- 包含 Livereload\r\nhttps://www.npmjs.com/package/browser-sync\r\nhttps://browsersync.io/docs\r\n\r\nmain-bower-files\r\n- Bower 工具\r\nhttps://www.npmjs.com/package/main-bower-files\r\n\r\ngulp-minify-css\r\n- CSS 壓縮工具\r\nhttps://www.npmjs.com/package/gulp-minify-css\r\n\r\ngulp-uglify\r\n- JavaScript 壓縮工具\r\nhttps://www.npmjs.com/package/gulp-uglify\r\n\r\nminimist \r\n- 將指令碼匯入 gulp 流程\r\nhttps://www.npmjs.com/package/minimist\r\n\r\ngulp-if\r\n- 將 gulp 加入判斷式\r\nhttps://www.npmjs.com/package/gulp-if\r\n\r\n---\r\n\r\n* [補充資料：可以幫我自動化嗎，拜託：Gulp - Huli](https://ithelp.ithome.com.tw/articles/10185976)\r\n* [補充資料：鐵人賽 16 - 將 Bootstrap 導入自動化流程](https://wcc723.github.io/css/2016/12/16/bootstrap-include/)"}}
{"actor":{"display_login":"Hsinny"}}