安裝gulp步驟和使用方法

a599174211發表於2018-09-28

1.使用npm命令安裝,一下兩個命令都需要使用

gulp的安裝非常簡單,只要使用npm命令安裝即可。但是因為gulp需要作為命令列的方式執行,因此需要在安裝在系統級別的目錄中。

npm install gulp -g

因為在本地需要使用require的方式gulp。(需要進入到專案的路徑下面)因此也需要在本地安裝一份:

npm install gulp --save-dev

2 建立gulp任務: 

要使用gulp來流程化我們的開發工作。首先需要在專案的根目錄下建立一個gulpfile.js檔案。然後在gulpfile.js中填入以下程式碼:

var gulp = require("gulp")

gulp.task("greet",function () {
    console.log('hello world');
});

這裡對程式碼進行一一解釋:

  1. 通過require語句引用已經安裝的第三方依賴包。這個require只能是引用當前專案的,不能引用全域性下的。require語法是node.js獨有的,只能在node.js環境下使用。

  2. gulp.task是用來建立一個任務。gulp.task的第一個引數是命令的名字,第二個引數是一個函式,就是執行這個命令的時候會做什麼事情,都是寫在這個裡面的。

  3. 寫完以上程式碼後,以後如果想要執行greet命令,那麼只需要進入到專案所在的路徑,然後終端使用gulp greet即可執行。

 

3. 建立處理css檔案的任務:

gulp只是提供一個框架給我們。如果我們想要實現一些更加複雜的功能,比如css壓縮,那麼我們還需要安裝一下gulp-cssnano外掛。gulp相關的外掛安裝也是通過npm命令安裝,安裝方式跟其他包是一模一樣的(gulp外掛本身就是一個普通的包)。
css檔案的處理,需要做的事情就是壓縮,然後再將壓縮後的檔案放到指定目錄下(不要和原來css檔案重合了)!這裡我們使用gulp-cssnano來處理這個工作:

npm install gulp-cssnano --save-dev

然後在gulpfile.js中寫入以下程式碼:

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")

// 定義一個處理css檔案改動的任務
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(gulp.dest("./css/dist/"))
});

以上對程式碼進行詳細解釋:

  1. gulp.task:建立一個css處理的任務。
  2. gulp.src:找到當前css目錄下所有以.css結尾的css檔案。
  3. pipe:管道方法。將上一個方法的返回結果傳給另外一個處理器。比如以上的cssnano
  4. gulp.dest:將處理完後的檔案,放到指定的目錄下。不要放在和原檔案相同的目錄,以免產生衝突,也不方便管理。

 

 4. 修改檔名:

像以上任務,壓縮完css檔案後,最好是給他新增一個.min.css的字尾,這樣一眼就能知道這個是經過壓縮後的檔案。這時候我們就需要使用gulp-rename來修改了。當然首先也需要安裝npm install gulp-rename --save-dev。示例程式碼如下:

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
});

在上述程式碼中,我們增加了一行.pipe(rename({"suffix":".min"})),這個我們就是使用rename方法,並且傳遞一個物件引數,指定修改名字的規則為新增一個.min字尾名。這個gulp-rename還有其他的指定檔名的方式,比如可以在檔名前加個字首等。更多的教程可以看這個:https://www.npmjs.com/package/gulp-rename。 

5. 建立處理js檔案的任務: 

處理js檔案,我們需要使用到gulp-uglify外掛。安裝命令如下:

npm install gulp-uglify --save-dev

安裝完後,我們就可以對js檔案進行處理了。示例程式碼如下:

var gulp = require("gulp")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify');
gulp.task('script',function(){
    gulp.src(path.js + '*.js')
    .pipe(uglify())
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest('js/'));
});

這裡就是增加了一個.pipe(uglify())的處理,對js檔案進行壓縮和醜化(修改變數名)等處理。更多關於gulp-uglify的教程。請看:https://github.com/mishoo/UglifyJS2#minify-options

6. 合併多個檔案: 

 

在網頁開發中,為了加快網頁的渲染速度,有時候我們會將多個檔案壓縮成一個檔案,從而減少請求的次數。要拼接檔案,我們需要用到gulp-concat外掛。安裝命令如下:

npm install gulp-concat --save-dev

比如我們現在有一個nav.js檔案用來控制導航條的。有一個index.js檔案用來控制首頁整體內容的。那麼我們可以使用以下程式碼將這兩個檔案合併成一個檔案:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('vendorjs',function(){
    gulp.src([
        './js/nav.js',
        './js/index.js'
    ])
    .pipe(concat('index.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
});

7. 壓縮圖片: 

 

圖片是限制網站載入速度的一個主要原因。圖片越大,從網站上下載所花費的時間越長。因此對於一些圖片,我們可以採取無失真壓縮,即在不改變圖片質量的基礎之上進行壓縮。在gulp中我們可以通過gulp-imagemin來幫我們實現。安裝命令如下:

npm install gulp-imagemin --save-dev

壓縮圖片也是一個比較大的工作量,對於一些已經壓縮過的圖片,我們就沒必要再重複壓縮了。這時候我們可以使用gulp-cache來快取那些壓縮過的圖片。安裝命令如下:

npm install gulp-cache --save-dev

兩個外掛結合使用的程式碼如下:

var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('image',function(){
    gulp.src("./images/*.*")
    .pipe(cache(imagemin()))
    .pipe(gulp.dest('dist/images/'));
});

8. 檢測程式碼修改,自動重新整理瀏覽器: 

 

以上我們實現了更改一些css檔案後,可以自動執行處理css的任務。但是我們還是需要手動的去重新整理瀏覽器,才能看到修改後的效果。有什麼辦法能在修改完程式碼後,自動的重新整理瀏覽器呢。答案是使用browser-syncbrowser-sync安裝的命令如下:

npm install browser-sync --save-dev

browser-sync使用的示例程式碼如下:

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
var bs = require("browser-sync").create()

gulp.task("bs",function () {
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

// 定義一個處理css檔案改動的任務
gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    .pipe(bs.stream())
});

// 定義一個監聽的任務
gulp.task("watch",function () {
    gulp.watch("./css/*.css",['css'])
});

// 執行gulp server開啟伺服器
gulp.task("server",['bs','watch'])

以上我們建立了一個bs的任務,這個任務會開啟一個3000埠,以後我們在訪問html頁面的時候,就需要通過http://127.0.0.1:3000的方式來訪問了。然後接下來我們還定義了一個server任務。這個任務會去執行bswatch任務,只要修改了css檔案,那麼就會執行css的任務,然後就會自動重新整理瀏覽器。
browser-sync更多的教程請參考:http://www.browsersync.cn/docs/gulp/

相關文章