【gulp】讓我們自動產生出漂亮的完成檔吧-安裝與執行任務

在進行一個前端網頁專案時，會產生相當多的文件，數個html、js、sass，還有相當多的圖片。而我們在撰寫sass或是ES6的JS，對於一些版本較低的瀏覽器，都會有不支援情況，因此我們可以透「gulp」這個前端自動化工具，幫我們執行像是自動加入css前綴詞，將ES6的語法降轉到較舊的版本，寫可以將多個CSS、JS檔案合併成一支、壓縮成一行、壓縮圖片等等，許多功能。

全域安裝

首先將電腦安裝gulp，在安裝gulp之前要先安裝node.js，因為gulp是基於node.js開發出來的，並順便安裝npm(套件管理工具)
確認node.js與npm之後就可以安裝全域的gulp(電腦安裝一次即可，讓電腦可以使用gulp指令)。

1	npm install --global gulp

專案安裝

接下來新建專案資料夾，我叫它gulp-learning

1 2	npm init npm install gulp

安裝完會有三個檔

gulp如何運作，有哪些方法

gulp的執行方式為

資料來源資料夾->執行任務->執行任務->…->輸出到指定資料夾

中間的任務就是我們想要自動化的事情

gulp有以下幾種方法可以使用

方法	說明
gulp.task()	執行任務(‘取任務名’,function(){要執行的任務})
gulp.src()	資料來源(路徑)
gulp.dest()	輸出地點(路徑)
gulp.watch()	可以監控指定檔案，當發生變化時，會自動執行指定的任務
gulp.series()	依序執行任務
gulp.parallel()	同時執行任務

撰寫gulp.js

先建立一個新的檔案，名叫gulpfile.js(一定要叫這個名稱哦)的檔案

1. 建立一個任務

先宣告要引入的套件var gulp = require(‘gulp’);

var gulp = require('gulp');  //宣告引入gulp套件

//建立一個任務
gulp.task('任務名稱',function(){
    //要執行的動作
})

範例
建立一個名為’hellogulp’的任務，此任務會在console印出’helloGulp’

1
2
3

gulp.task('hellogulp',function(){
    console.log('helloGulp');
})

要如何執行它呢?
在CMD打上gulp hellogulp指令
可以看到執行結果

這樣就是有順利執行任務

2. 尋找需要的套件，並建立任務

在本文最一開始有提到，gulp可以執行像是將sass轉為css，自動補上前綴詞等等，但這些其實都是他人開發好的套件，這些套件可以在npm中尋找，並依序套件說明執行。
以下以可以幫助我們將sass轉成css的gulp-sass套件為例

gulp-sass官方文件:gulp-sass

首先先安裝套件

1	npm install node-sass gulp-sass --save-dev

安裝之後可以到package.json，看到自己安裝那些套件與版本

接下來我們照著官方文件說明，複製貼上

//宣告套件
var sass = require('gulp-sass');
var gulp = require('gulp');

//建立名為sass的任務，下gulp sass指令可以啟動任務
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')//資料來源，sass資料夾裡所有的scss檔
    .pipe(sass().on('error', sass.logError))//將sass轉為css檔
    .pipe(gulp.dest('./css'));//輸出到指定資料夾
});

//建立名為sass:watch的任務，下gulp sass:watch指令，當'./sass/**/*.scss'檔案發生改變，會執行sass任務
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
            //('要監控的檔案',要執行的任務，可以為多個，用這陣列表示)
});

此篇記錄基本的gulp安裝與建立任務，
之後將整理常用的gulp套件。

參考資料