這一篇的內容是紀錄gulp管理專案並跟bower混用的專案，
這邊我先放上依據以下步驟，完成的專案連結
那我們就開始吧~

gulp 操作步驟紀錄

step1.
首先，你的電腦要先安裝nodeJS。
並輸入node -v 來檢查是否你的nodeJS有安裝完成。
step2.
在你的電腦全域環境中，安裝gulp (每台電腦只需要安裝一次)
輸入指令 npm install gulp -g
安裝完成之後，在編譯器中下gulp -v來查看gulp的版本，
如果有跳出來相對應的版本的話，就代表安裝成功囉~
step3.
接著，輸入指令npm init，來初始化你的專案檔環境，當該指令執行結束，你的專案檔應該會出現一個
package.json的檔案，他可以用來記錄你這個專案檔使用那些相依套件和專案檔的自訂義的執行指令，
在未來，擬將你的專案檔給別人時，不需要將專案檔中的node_module資料夾給別人，因為，別人會輸入npm install，
接著，編譯器就會依照你專案檔中的package.json所紀錄的相依套件來做環境的安裝囉~
step4.
接著，輸入指令npm install ，來為你這個專案檔安裝套件的環境
step5.
安裝完成之後，你就輸入gulp指令，編譯完成後，你專案檔的網頁會直接跳出來。

step6.
首先，你要為你的專案檔安裝gulp套件。
注意，不要跟step2的那個步驟搞混囉，這一步是指在當下開啟的這個專案檔中安裝gulp套件。
輸入指令 npm install gulp –save。
安裝成功的話，就可以看到妳的package.json檔案中的dependencies多了紀錄gulp版本的內容。

step7.
接下來我們會安裝gulp的相關套件。
首先，先安裝gulp concat，它可以用來將很多js檔案串接在一起。
你到gulp-concat網址，就可以找到怎麼安裝這個套件的方法囉。
你就輸入指令npm install –save gulp-concat，就可以安裝成功囉。

那你會在gulp-concat的官網上看到他的安裝指令是npm install –save-dev gulp-concat
多了-dev這個部分，那這個部分是指將該套件先安裝到測試的環境下，若你輸入npm install –save-dev gulp-concat，
你會發現你的package.json多了以下的內容

1
2
3

"devDependencies": {
  "gulp-concat": "^2.6.1"
}

你可以看到它是devDependencies，代表是在測試環境下的套件，不過，我這邊就把-dev的部份去掉，直接安裝在實際執行環境下囉。

定義gulp任務

step8.
接下來，我們要創一個檔案叫gulpfile.js。
這個檔案專們寫下我們希望gulp套件來為我們做那些任務。

---gulpfile.js---
var gulp = require('gulp');  // 引入gulp套件
var concat = require('gulp-concat'); // 引入gulp-concat套件

gulp.task('concat', function() {   // 定義一個gulp任務叫concat
  return gulp.src('./source/js/**/*.js')  // 代表資料來源在哪裡，這邊是代表在soruce資料夾中的js資料夾中的所有js檔案
    .pipe(concat('all.js'))               // 將以上路徑中的js檔案，彙總到一個all.js檔案中
    .pipe(gulp.dest('./public/javascripts')) // 代表上面那個匯總的all.js檔案，要輸出到哪裡，這邊指的就是要輸出到public資料夾裡的javascripts資料夾中
})

首先，在gulp定義任務的內容中，
他們彼此之間是用pipe來串接起來，那最後一個pipe，就是最終檔案要輸出的路徑。
第二，
寫完上面的規則後，我們先在創一個source資料夾，並在裡面再創一個js資料夾，接著，在js資料夾中創兩個js檔案，分別為a.js和b.js。
並在這兩個js檔案寫一些內容。寫完之後，輸入指令 gulp concat，你就會發現出現了一個public資料夾，裏面包含了一個javascripts資料夾，在這個資料夾裡面有一個all.js檔案，
那這個all.js檔案的內容，就是將a.js和b.js的檔案內容合併在一起，是不是都跟我們在gulpfile.js中寫的規則一樣呢，很方便吧~~~

壓縮合併檔案

step9.
我們要下載一個gulp-uglyfly的套件，來將我們合併完成的all.js檔案壓縮，讓指體檔案變得更小。
你可以到它的官網找到安裝的指令。
輸入指令 npm install –save gulp-uglyfly
接著，你到gulpfile.檔案中加入有關gulp-uglyfly的內容

var gulp = require('gulp');  
var concat = require('gulp-concat'); 
var uglyfly = require('gulp-uglyfly'); // 引入gulp-uglyfly套件

gulp.task('concat', function() {
  return gulp.src('./source/js/**/*.js')  
    .pipe(concat('all.js'))
    .pipe(uglyfly())  // 利用uglyfly來將all.js壓縮
    .pipe(gulp.dest('./public/javascripts')) 
})

你可以看到我們先引入gulp-uglyfly，接著，在concat任務裡面，在concat後面再pipe一個uglyfly的動作。
修改完之後，輸入gulp concat，你應該就可以看到在public資料夾中的all.js檔案內容都被擠到同一行裡面，這就是gulp-uglyfly得功勞喔~

安裝gulp sass檔案

你到它的官網，就可以看到相關安裝指令。
輸入指令 npm install node-sass gulp-sass –save
接著，修改一下，gulpfile.js的內容

---gulpfile.js---
var sass = require('gulp-sass'); // 引入gulp-sass套件
sass.compiler = require('node-sass');

gulp.task('sass', function () {   // 定義任務
  return gulp.src('./source/scss/**/*.scss')  // scss檔案來源
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/scss'));        // 檔案輸出位置
});

以上的內容是直接複製官網上的內容，再修改路徑。
你輸入指令gulp sass，應該就可以在public資料夾中看到產出一個scss檔案，而且裡面有一個all.css的檔案了。

一次執行多個任務

gulp允許你一次執行多個你已經定義的gulp
像上面的範例，我自訂義了兩個任務分別是sass和concat。
那我需要在gulpfile.js檔案裡面新增這一行程式碼

---gulpfile.js---
gulp.task('concat', function() {
  return gulp.src('./source/js/**/*.js')  // 代表資料來源在哪裡
    .pipe(concat('all.js'))
    .pipe(uglyfly())  // 利用uglyfly來將all.js壓縮
    .pipe(gulp.dest('./public/javascripts')) // 代表這個gulp最終要輸出的檔案要輸出到哪裡
})

gulp.task('sass', function () {
  return gulp.src('./source/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/scss'));
});
 
gulp.task('default', gulp.series(['concat', 'sass']))  // 新增這一行，執行concat和sass這兩個任務

當你新增完以上程式碼後，輸入指令gulp，你就可以一次執行concat和sass這兩個任務囉。
若你有3個或以上的任務想要一次執行，做法就以此類推囉~

加入index.html

最後，你在public資料夾中，加入一個index.html檔案，並在這個檔案引入你用gulp產生出來的all.js和all.css，接著，在瀏覽器上看這個html檔案，應該就會呈現
你撰寫的內容和加入的樣式囉。

Bower加入jquery

引入bower在gulp專案的原因是，
我們可以利用bower來管理套件，利用gulp來將bower中引入的套件的javascript合併。
step1.
你需要先為你的電腦的全域環境安裝bower，如果沒有安裝的話你是沒辦法在編譯器裡面使用bower指令的。
輸入指令npm install -g bower。
接著，輸入bower init，它會跳出一些要你輸入的資料，你不用管他們直接enter到底，接著，成功後，你會看到你的專案檔裡面出現一個bower.json檔案。
裡面的內容就是紀錄bower所管理的套件。

step2.
接著，利用bower來安裝你想要安裝的套件。
那在這邊的話我們希望安裝jquery，所以，輸入指令bower install jquery。
輸入完之後，你會發現多一個bower_component的資料夾，在這個資料夾裡面有一個dist的資料夾，裡面就放了jquery所有的js檔案。

step3.
利用bower安裝完jquery後，我們就利用gulp來將這個jquery引入到我們的專案中。
所以，我們要修改一下gulpfile.js檔案

var vendorJS = [
  'bower_components/jquery/dist/jquery.min.js'  // 代表jquery的js檔案的來源路徑
]

gulp.task('vendor', function() {
  return gulp.src(vendorJS)     // 加到這裡
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('./public/javascripts')) 
})

gulp.task('default', gulp.series(['concat', 'sass', 'vendor']))   // 將vendoe任務也放到gulp中

這邊撰寫的內容在此說明一下，
你可以發現我們沒有新增require的內容，因為，jquery不是gulp的套件。
第二，我們先將jquery的js路徑放到一個陣列裡面，接著，再將這個陣列放到vendor這個task裡面。用陣列撰寫的來源路徑的方式，可以在該陣列裡面寫入多個來源路徑，
最後，再將這個路徑陣列放到你的gulp的task的gulp.src中，gulp就會依循這些路徑來抓取來源檔案，並透過concat將其內容都匯整到你指定的檔案中，像這邊我就指定
要匯整到一個叫vendor.js的檔案。

第三，將該任務也放到gulp任務中，接著你執行指令gulp，你就可以看到你指定生成的資料夾裡面出現vendor.js檔案，裡面包含的就是jquery的js內容。
最後，你在你的public的資料夾中的index.html也引入這個生成的vendor.js，此時，你的專案檔就可以開始使用jquery的功能囉。

---index.html---
<head>
  <link rel="stylesheet" href="./scss/all.css">
  <script src="./javascripts/vendor.js"></script>
  <script src="./javascripts/all.js"></script>
</head>

gulp的watch任務

watch的功能在於它能監控我們指定的資料夾，若該資料夾有變動的時候，就會做相對應的動作，不需要我們再手動下一次gulp的指令。
你就修改gulfile.js檔案中的指令

---gulpfile.js---
gulp.task('watch', function () {   // 監控任務
  gulp.watch('./source/js/**/*.js', gulp.series('concat'))    // 監控sorce資料夾中的所有js檔案
  gulp.watch('./source/scss/**/*.scss', gulp.series('sass'))  // 監控sorce資料夾中的所有sass檔案
})
gulp.task('default', gulp.series(['concat', 'sass', 'vendor', 'watch']))   // 記得，要將監控任務放到最後面，修改完之後才監控

加入以上的內容後，輸入指令gulp，我們直接修改js檔案或 scss檔案就會因為watch的gulp任務，可以直接渲染到網頁上，不需要再輸入gulp指令囉。

利用gulp來將專案檔部屬到github_pages

step1.
首先，要先安裝gulp的gh-pages套件。
你去它的官網就可以看到怎麼安裝了。
輸入指令npm install –save gulp-gh-pages，
安裝完之後，去修改gulpfile.js的指令內容，新增可以直接部屬到github_pages上。

---gulpfile.js---
var ghPages = require('gulp-gh-pages');  // 引入gulp-gh-pages套件

gulp.task('deploy', function() {   // 定義部屬github_pages的任務
  return gulp.src('./public/**/*')  // 來源檔案是public資料夾內的所有檔案
    .pipe(ghPages());  // 執行部屬動作
});

step2.
定義完部屬的指令之後，你要先為你的專案檔建立git環境。
所以，
第一，輸入git init，為你的專案檔建立git環境。
第二，新增一個.gitignore檔案，這個檔案內容是定義你不想要將那些檔案或資料夾部屬到github上面
我裡面是寫

---.gitignore---
.vscode
node_modules
public
bower_components
.tmp

第三，輸入指令 git add .
第四，輸入指令 git commit -m “修改的提示訊息”
第五，輸入指令 git remote add origin “git_repo_網址”
如此，就已經完成將你的專案部屬到相對應的git repo中。
第六，將該專案檔中的public檔案部屬到github_pages中，所以，你輸入指令gulp deploy，如此，就可以將public資料部屬到github_pages中，可以在相對應的網址直接
在網頁上看到你的專案檔成果囉~~

Landy Blog

建立gulp環境操作步驟紀錄