2014年11月2日

JavaScript - 使用gulp來建置JS

這篇的來源,是從這裡來的,後來看到一半,發現已經有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,則會內建,未來也會持續更新。

參考資料

1 則留言:

  1. Chia sẻ các bạn mẹo làm sáng trang sức bằng bạc hiệu quả hay tác hại của việc nghiện Facebook hay với những địa điểm chơi Noel ở TPHCM rực rỡ nhất hay nguồn gốc và ý nghĩa của lễ giáng sinh hay những lời chúc giáng sinh hay và ý nghĩa nhất 2015 cho bạn bè cách quên người yêu cũ nhanh nhat hiệu quả hay top 10 điện thoại đắt nhất thế giới hay nguồn gốc thứ 6 ngày 13những hình xăm nhỏ đẹp hay ý nghĩa 2015 hay hướng dẫn cách làm cánh gà tẩm bột chiên xù hay cách trị thâm quầng mắt hiệu quả nhất hay bạn muốn câu cá thì cách làm mồi câu cá rô phi sông hiệu quả hay những câu đố vui hay nhất có đáp án hay giảm mỡ bụng sau sinh bằng rượu gừng nghệ cực hiệu quả hay mách mẹ những thực phẩm giàu axit folic hay cách chữa hóc xương cá hiệu quả nhất hay những điều không nên chia sẻ trên Facebook cực nguy hiểm hay hiện tượng nháy mắt trái có điềm gì mang đến xui xẻo gì những món ăn kỵ nhau gây chết người bạn nên biết hay những cách gặp ma đầy thú vị hay những điều kiêng kỵ khi hôn đàn ông nên biết hay giải mã giấc mơ thấy rắn là điềm gì xui hay không hay bà bầu nên ăn gì trong 3 tháng đầu thai kỳ hay uống nước thì cách uống nước đúng cách hay cây chùm ngây và tác dụng của cây chùm ngây thần kỳ.

    回覆刪除