（轉）前端構建工具gulp入門教程

sl521100發表於2015-08-17
前端

前端構建工具gulp入門教程

老婆婆老婆婆 1.8k 2013年12月30日 釋出
  •  10 推薦
  •  83 收藏，20k 瀏覽

本文假設你之前沒有用過任何任務指令碼（task runner）和命令列工具，一步步教你上手Gulp。不要怕，它其實很簡單，我會分為五步向你介紹gulp並幫助你完成一些驚人的事情。那就直接開始吧。

第一步：安裝Node

首先，最基本也最重要的是，我們需要搭建node環境。訪問http://nodejs.org，然後點選大大的綠色的install按鈕，下載完成後直接執行程式，就一切準備就緒。npm會隨著安裝包一起安裝，稍後會用到它。

第二步：使用命令列

也許現在你還不是很瞭解什麼是命令列——OSX中的終端（Terminal），windows中的命令提示符（Command Prompt），但很快你就會知道。它看起來沒那麼簡單，但一旦掌握了它的竅門，就可以很方便的執行很多命令列程式，比如Sass，Yeoman和Git等，這些都是非常有用的工具。

如果你很熟悉命令列，直接跳到步驟四。

為了確保Node已經正確安裝，我們執行幾個簡單的命令。

node -v

回車（Enter），如果正確安裝的話，你會看到所安裝的Node的版本號，接下來看看npm。

npm -v

這同樣能得到npm的版本號。

如果這兩行命令沒有得到返回，可能node就沒有安裝正確，嘗試重啟下命令列工具，如果還不行的話，只能回到第一步進行重灌。

第三步：定位到專案

現在，我們已經大致瞭解了命令列並且知道如何簡單使用它，接下來只需要兩個簡單的命令就能定位到檔案目錄並看看目錄裡都有些什麼檔案。

  1. cd，定位到目錄
  2. ls，列出檔案列表

建議多敲敲這兩個命令，瞭解檔案系統並知道檔案都在哪裡。

習慣使用了這兩個命令後，就要進入我們的專案目錄，這個目錄各不相同，舉個例子，這是我進入我專案目錄的命令：

cd /Applications/XAMPP/xamppfiles/htdocs/my-project

成功進入專案目錄後，我們開始安裝gulp。

第四步：安裝gulp

我們已經知道如何使用命令列，現在嘗試點新的東西，認識npm然後安裝gulp。

NPM是基於命令列的node包管理工具，它可以將node的程式模組安裝到專案中，在它的官網中可以檢視和搜尋所有可用的程式模組。

在命令列中輸入

sudo npm install -g gulp
  1. sudo是以管理員身份執行命令，一般會要求輸入電腦密碼

  2. npm是安裝node模組的工具，執行install命令

  3. -g表示在全域性環境安裝，以便任何專案都能使用它

  4. 最後，gulp是將要安裝的node模組的名字

執行時注意檢視命令列有沒有錯誤資訊，安裝完成後，你可以使用下面的命令檢視gulp的版本號以確保gulp已經被正確安裝。

gulp -v

接下來，我們需要將gulp安裝到專案本地

npm install —-save-dev gulp

這裡，我們使用—-save-dev來更新package.json檔案，更新devDependencies值，以表明專案需要依賴gulp。

Dependencies可以向其他參與專案的人指明專案在開發環境和生產環境中的node模組依懶關係，想要更加深入的瞭解它可以看看package.json文件。

第五步：新建Gulpfile檔案，執行gulp

安裝好gulp後我們需要告訴它要為我們執行哪些任務，首先，我們自己需要弄清楚專案需要哪些任務。

  • 檢查Javascript
  • 編譯Sass（或Less之類的）檔案
  • 合併Javascript
  • 壓縮並重新命名合併後的Javascript

安裝依賴

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

提醒下，如果以上命令提示許可權錯誤，需要新增sudo再次嘗試。

新建gulpfile檔案

現在，元件都安裝完畢，我們需要新建gulpfile檔案以指定gulp需要為我們完成什麼任務。

gulp只有五個方法： task，run，watch，src，和dest，在專案根目錄新建一個js檔案並命名為gulpfile.js，把下面的程式碼貼上進去：

gulpfile.js

// 引入 gulp
var gulp = require('gulp'); 

// 引入元件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 檢查指令碼
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 編譯Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合併，壓縮檔案
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 預設任務
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 監聽檔案變化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

現在，分段解釋下這段程式碼。

引入元件

var gulp = require('gulp'); 

var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

這一步，我們引入了核心的gulp和其他依賴元件，接下來，分開建立lint, sass, scripts 和 default這四個不同的任務。

Lint任務

gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

Link任務會檢查js/目錄下得js檔案有沒有報錯或警告。

Sass任務

gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

Sass任務會編譯scss/目錄下的scss檔案，並把編譯完成的css檔案儲存到/css目錄中。

Scripts 任務

gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

scripts任務會合並js/目錄下得所有得js檔案並輸出到dist/目錄，然後gulp會重新命名、壓縮合並的檔案，也輸出到dist/目錄。

default任務

gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

這時，我們建立了一個基於其他任務的default任務。使用.run()方法關聯和執行我們上面定義的任務，使用.watch()方法去監聽指定目錄的檔案變化，當有檔案變化時，會執行回撥定義的其他任務。

現在，回到命令列，可以直接執行gulp任務了。

gulp

這將執行定義的default任務，換言之，這和以下的命令式同一個意思

gulp default

當然，我們可以執行在gulpfile.js中定義的任意任務，比如，現在執行sass任務：

gulp sass

(Kimi: 哇塞，酷比了哎~)

結束語

現在已經做到了設定gulp任務然後執行他們，現在再回顧下之前學習的。

  1. 學習了安裝Node環境
  2. 學習了簡單使用命令列
  3. 學習了用命令列進入專案目錄
  4. 學習了使用npm和安裝gulp
  5. 學習瞭如何執行gulp任務

另外，有一些參考資源供進一步學習：

  1. npm上得gulp元件
  2. gulp的Github主頁
  3. 官方package.json文件

本文譯自http://travismaynard.com/writing/getting-started-with-gulp

相關文章