20分鐘gulp快速入門

Mopecat發表於2019-02-16

在網際網路告訴發展的今天，自node出現後，我們前端也越來越大（心裡美美噠~），同樣帶來的Web業務日益複雜化和多元化，模式也都想webPage模式轉向webApp模式，拼幾個頁面搞幾個jquery的外掛就能搞一個完成一個專案的日子已經是很久遠的曾經了，而且從前要實現壓縮程式碼，壓縮圖片，上傳到伺服器等等等需要各種工具才能實現的功能，用起來很麻煩。所以出現了各種前端構建化工具也應運而生：grunt,gulp,webpack等已經成為現在前端開發工程師的必備技能之一。最新的Parcel也大出風頭，因為Webpack 提供的“零配置”的進展緩慢和混沌不清，不過現在webpack4.0已經發布了，還不清楚未來的走向~ 好，說了這麼多，該說說今天的主角了，雖然已經不是前沿的技術了，但是用起來非常的簡單方便人性化，下面就來簡單介紹介紹基礎用法啦~

安裝

在確保你的電腦裡裝了node的情況下，開啟命令列執行以下程式碼：

 npm install --global gulp
複製程式碼

全域性安裝gulp，開啟命令列輸入gulp -v有版本號則證明安裝成功啦 然後建立一個資料夾，名字隨你啦~我們接下來的操作都在這個資料夾中進行啦~ 我建立的資料夾叫gulpexample，如果你的電腦中安裝了git請進入這個資料夾然後右鍵選擇git bash here，如果沒有安裝那就進入cmd然後進入相應的檔案目錄啦~然後~

  • 執行npm init之後會讓你填名字啊 作者啊 描述啊 之類的 剩下的你就一頓回車，之後你的資料夾中就會自動生成一個package.json檔案
  • 然後在命令列中執行npm instal gulp --save-dev在當前專案中安裝gulp

好啦，現在gulp就安裝完畢了~接下來我們可以騷操作了

  • 在根目錄建立一個檔案命名為gulpfile.js（必須是這個，不能變哦）
  • 在根目錄穿件一個資料夾src 簡單的介紹一下gulp的api
/*
*
*  gulp.task -- 定義任務
*       gulp.task('任務名，命名隨你啦',fn);
*  gulp.src  -- 找到需要執行任務的檔案
*       gulp.src('要執行的檔案的目錄').pipe(要執行的api)
*  gulp.dest -- 執行任務的檔案的去處
*       gulp.dest('檔案的去處目錄（若沒有回建立資料夾）')
*  gulp.watch -- 觀察檔案是否變化
*       gulp.watch('要監控的檔案目錄下的檔案','變化後要執行的task')
*
* */
複製程式碼

然後我們簡單的應用一下感受一下gulp的用法

  • 開啟gulpfile.js輸入如下程式碼：
var gulp = require('gulp');
// 定義任務
gulp.task('message',function(){
    return console.log('gulp is running!');
});
複製程式碼
  • 然後再當前資料夾目錄下的命令列中執行 gulp message

20分鐘gulp快速入門
可以看到gulp is running證明任務已經執行了

接下來為大家簡單介紹一下：拷貝檔案，壓縮合並js，sass編譯，壓縮圖片的用法。 首先來安裝上述功能相對應的外掛(同樣也是在相應的目錄下執行哦)

npm install gulp-sass gulp-concat gulp-uglify gulp-imagemin --save-dev
複製程式碼

安裝可能會有些慢，如果實在受不了的話可以安裝淘寶的映象cnpm 然後用cnpm執行哦~ cnpm的安裝如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

安裝完gulp的外掛後在專案根目錄新建資料夾src，開啟gulpfile.js開始配置~；

  • 第一步，引入外掛
// 引入gulp及外掛
var gulp = require('gulp'); 
var imagemin = require('gulp-imagemin'); // 圖片壓縮
var uglify = require('gulp-uglify'); // js壓縮
var sass = require('gulp-sass');// sass編譯
var concat = require('gulp-concat'); // 程式碼合併
複製程式碼
  • 第二步，定義任務 我們先來定義個簡單的任務來再次熟悉一下gulp的用法~ 下面定義一個拷貝html的任務

任務一， 拷貝html

// 任務：拷貝html
gulp.task('copyHtml',function(){
    // 選取到src目錄下的所有html檔案 （為了測試效果，請自己再src目錄下隨便建立兩個html檔案咯）
    gulp.src('src/*.html')
        .pipe(gulp.dest('dist')); // 將html拷貝到dist目錄下，沒有dist會自動生成
});
複製程式碼

在命令列裡執行 gulp copyHtml 就可以啦，趕緊去看看你的資料夾裡成功拷貝了麼？

任務二， 圖片壓縮

準備工作：在src目錄下新建images資料夾，在裡面隨便放幾張圖片

// 任務： 圖片壓縮
gulp.task('imagemin',function(){
    gulp.src('src/images/*')
        .pipe(imagemin()) // 呼叫外掛imagemin
        .pipe(gulp.dest('dist/image')) // 壓縮後的圖片輸出目錄
});
複製程式碼

同樣命令列執行 gulp imagemin 即可完成輸出， 現在你應該基本瞭解gulp的任務寫法了，接下來的幾個任務我就不細說了，直接上程式碼

// sass 編譯 src目錄下件資料夾sass然後在裡面新建一個sass檔案，按照sass的語法寫一些樣式
gulp.task('sass',function(){
    gulp.src('src/sass/*') // 獲取sass檔案（*.scss）
        .pipe(sass().on('error',sass.logError)) // 執行sass外掛，並檢查錯誤
        .pipe(gulp.dest('dist/css')); // 輸出css檔案的路徑
});

// 合併壓縮程式碼，src目錄下新建資料夾js然後在裡面建立幾個js檔案
gulp.task('scripts',function(){
    gulp.src('src/js/*.js') // 獲取js檔案
        .pipe(concat('main.js')) // 合併檔案為main.js
        .pipe(uglify()) // 壓縮js程式碼
        .pipe(gulp.dest('dist/js')) // 輸出合併壓縮後的檔案路徑
});
複製程式碼

現在4個api我們已經用了3個了，還有一個監聽的watch沒有用，簡單介紹一下，字面意思監聽相應目錄下的檔案是否發生改變，如果改變執行某個任務，即一個引數為監聽目錄，另一個引數為要執行的任務，（watch是一個持續執行的任務結束的話是不會停止的哦）程式碼如下：

// 監聽檔案是否發生變化
gulp.task('watch',function(){
    gulp.watch('src/js/*.js',['scripts']); // 監聽src/js/下的所有js檔案，如果發生變化則執行任務scripts,下面同理
    gulp.watch('src/sass/*',['sass']);
    gulp.watch('src/*.html',['copyHtml']);
    gulp.watch('src/images/*',['imageMin']);
});
複製程式碼

現在就已經有了5個任務了（算上最開始的message就6個了）每一個任務都要執行一遍命令列是不是很麻煩。如果任務更多了那就更煩了，不要擔心，gulp為我們準備了預設任務default

// 定義預設任務 , 這裡的預設任務default不能隨便定義 只能是default,後面接受一個陣列作為引數，傳入預設執行的任務，後面還可以接受一個回撥函式用以執行預設任務程式碼這裡就不給做展示了
gulp.task('default',['message','copyHtml','sass','scripts','imageMin','watch']);
複製程式碼

定義好預設任務如上後，在命令列中輸入gulp回車即可按照引數中的任務順序全部執行。

結語

今天的gulp分享就告一段落啦~希望能對大家有所幫助。本次分享只是入門教程，簡單的介紹了基礎用法，實際專案中更復雜的用法日後會陸續分享給大家噠~如果喜歡給點個贊啦（比心心~~），後續預告~~本週還會出webpack的相關入門分享給大家，同樣本文發表在segmentfault、個人微信公眾號Mopecat及個人部落格mopecat.cn/歡迎點贊關注澆水哦~

相關文章