技術標籤：前端構建工具前端

安裝

• 使用npm install gulp -g命令全域性安裝gulp
• 進入專案目錄安裝到本地npm install [email protected] -D，(專案目錄下安裝版本為3.9.1的gulp)

注意：gulp安裝的版本要和nodejs版本相容，否則後面會出現一定的問題
我使用的node和gulp的版本
node：10.16.2
gulp：3.9.1

建立gulpfile.js檔案

  然後再工程資料夾下建立名為gulpfile.js的檔案，後面使用gulp命令的時候會從gulpfile.js中找到對應的任務，並執行對應的程式碼。

編寫任務

  1. 首先在gulpfile.js中要引入gulp模組

const gulp = require('gulp');

  2. 呼叫gulp.task()編寫任務，其中第一個引數是任務名，第二個引數是一個回撥函式，在終端中使用gulp [任務名]命令就可以執行對應任務名回撥函式中的程式碼。

gulp.task('taskname', function () {
  console.log('這是第一個任務');
});

執行gulp任務

  在終端中使用命令gulp [任務名]執行任務

gulp常用方法

• gulp.src(globs)原始檔，接收引數globs: string | string[]

  路徑字串或者路徑字串陣列，這裡路徑是採用glob規則

• gulp.dest(fold) 目的檔案，如果努力不存在則建立，接收引數為資料夾路徑

• pipe()管道，(目前我理解的是把對應檔案路徑轉換成檔案流，我對pipe()還不是很瞭解^_^)

• gulp.watch(globs,tasks)兩個引數globs和任務名tasks任務名陣列，表示監聽globs路徑的檔案，一旦檔案傳送變化執行tasks中所有的gulp任務

  這裡舉一個例子↓↓↓，比較常用的拷貝功能來加深對著前三個方法的理解

gulp.task('copy-html', function () {
  return gulp.src
 
("index.html")
    .pipe(gulp.dest('dist'));
});

  這個任務，首先gulp.src('index.html')找到原始檔，然後通過pipe(gulp.dest('dist'))把index.html檔案拷貝到名為dist目錄下。

一次執行多個任務

gulp.task('build', ['copy-html', 'images', 'data'], function () {
  console.log('任務執行完畢');
});

  可以看的出來，gulp是非同步執行多個任務，同時執行了copy-html、images、data三個任務。

示例

  附上gulp基本使用的示例完整原始碼↓↓↓

const gulp = require('gulp');

// 編寫第一個任務

/**
 * 
 * 第一個引數: 任務的名字
 * 第二個引數: 回撥函式，任務執行的功能
 */
gulp.task('taskname', function () {
  console.log('這是第一個任務');
});

/**
 *  gulp.src()  找到原始檔路徑
 *  gulp.dest() 找到目的檔案的路徑 ，如果不存在就建立
 *  pipe()
 */
// 功能： 拷貝檔案
gulp.task('copy-html', function () {
  return gulp.src("index.html")
    .pipe(gulp.dest('dist'));
});


// 拷貝圖片
gulp.task('images', function () {
  // return gulp.src('img/*.{jpg,png}').pipe(gulp.dest('dist/images'));
  // return gulp.src('img/*/*').pipe(gulp.dest('dist/images'));
  return gulp.src('img/**/*')
    .pipe(gulp.dest('dist/images'));
});

// 拷貝資料來源
gulp.task('data', function () {
  return gulp.src(['json/*.json', 'xml/*.xml', '!json/2.json'])
    .pipe(gulp.dest('dist/data'));
});

// 一次執行多個任務,  非同步執行的
gulp.task('build', ['copy-html', 'images', 'data'], function () {
  console.log('任務執行完畢');
});


// 監聽
gulp.task('watch', function () {
  console.log('gulp開始監聽');
  /**
   * 第1個引數 監聽檔案的路徑
   * 第2個引數 監聽執行的任務
   */
  gulp.watch('index.html', ['copy-html']);
  gulp.watch('img/**/*', ['images']);
  gulp.watch(['json/*.json', 'xml/*.xml', '!json/2.json'], ['data']);
});

其他gulp總結的很好的部落格

前端構建工具gulp超詳細配置, 使用教程(圖文)