>天空的垃圾場 v3

JavaScript - 使用gulp來建置JS

02 November 2014 — Written by Sky Chang
#Gulp#JavaScript#Visual Studio

這篇的來源，是從這裡來的，後來看到一半，發現已經有JS神人翻成中文了..Orz..但已經弄到一半，就還是留下來記錄一下…有興趣的朋友，可以直接去看中文版的，寫的很詳細也很棒喔!!

最近因為某些因素，也開始看看JS的建置方案，至於為什麼要建置，有很多的原因，舉例來說，我們希望把JS給min化，又或許是把多個JS給綑綁成一個，又或許是為了要測試；總之，近代的JS已經沒有以前那樣的單純，所以也需要個建置流程，來處理這些事情~

而除了今天要聊的gulp外，其餘還有grunt等方案，但小弟選的是gulp，其實也沒為什麼，就覺得他的設定過程滿好的XDDD，也容易理解，就選擇了gulp~

開始前，我們必須先透過npm進行安裝，不知道甚麼是npm的朋友，可以看一下這篇。

裝完npm後，我們就可以透過npm install gulp -g進行第一次的全域安裝。

image

接下來，我們就進入我們要的專案底下，針對此專案，再安裝一次gulp。

image

完成之後，我們要持續的透過npm進行gulp的套件安裝；這邊有非常多的套件，因為神人那篇已經寫的很詳細了，小弟這邊就不多加敘述了。

  • gulp-uglify - 將JS醜化…( 就類似程式碼混淆器的功能 )
  • gulp-rename - 重新命名JS檔案
  • gulp-clean - 清除目標路徑
  • gulp-concat - 合併多個JS檔案
  • gulp-notify - 通知，完成後通知功能

image

接下來，我們要在專案下，建立一個gulpfile.js的檔案。

image

檔案的內容大致如下，簡單的說，前面是針對套件的載入，接下來使用pipe來讓套件一個一個的循序漸進的工作，而gulp.dest表示目標的路徑，這邊指的是當合併成main.js或是使用uglify後，要將js檔案放到哪個路徑…最後我們再使用gulp.start來啟動Task。

以下面的案例來說，我們先使用src讀取所有的js位置，並且透過concat合併成main.js並且輸出到assets/js的路徑下，接下來，我們將此檔案新建立一個.min的檔案並且混淆裡面內容後輸出到dist/assets/js底下，完成後，使用Scripts task complete來通知我們。

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify');

gulp.task('scripts', function () {
    return gulp.src('src/scripts/**/*.js')
      .pipe(concat('main.js'))
      .pipe(gulp.dest('dist/assets/js'))
      .pipe(rename({ suffix: '.min' }))
      .pipe(uglify())
      .pipe(gulp.dest('dist/assets/js'))
      .pipe(notify({ message: 'Scripts task complete' }));
});

gulp.task('clean', function () {
    return gulp.src(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], { read: false })
      .pipe(clean());
});

// 預設任務
gulp.task('default', ['clean'], function () {
    gulp.start('scripts');
});

完成之後，我們只要進入指令模式，打入gulp，就可以呼叫建置。

image

基本上就先到這邊，其實原文的部分，還有包含CSS、瀏覽器自動更新等功能，如果迫不急待的朋友們，可以看看參考資料，那邊寫的非常詳細喔!~

未來小弟這篇，會再慢慢的補充上去。

另外，目前Visual Studio 2013已經有提供IDE的套件，至於未來的Visual Studio 2015，則會內建，未來也會持續更新。

參考資料

  • http://markgoodyear.com/2014/01/getting-started-with-gulp/

  • [http://987.tw/2014/07/09/gulpru-men-zhi-nan/](http://987.tw/2014/07/09/gulpru-men-zhi-nan/ "http://987.tw/2014/07/09/gulpru-men-zhi-nan/")
  • [http://www.w3ctech.com/topic/114](http://www.w3ctech.com/topic/114 "http://www.w3ctech.com/topic/114")
Sky & Study4.TW