20分鐘gulp快速入門

在互聯網告訴發展的今天，自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

能夠看到 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/歡迎點贊關注澆水哦~