Gulp

Gulp

gulp經常使用插件列表

• gulp-uglify　　//使用uglify()函數，壓縮代碼，只能壓縮js
• gulp-concat　　//使用concat()函數，合併代碼
• gulp-autoprefixer　　//使用autoprefixer()，自動爲css3屬性添加瀏覽器私有前綴
• gulp-csso　　　　//壓縮css代碼
• gulp-html-minify　　　　//壓縮html文件，去掉html文件的換行空格等
• gulp-html-replace　　　　//用來替換html中的構建塊
• gulp-base64　　　　//將小圖片轉換爲base64碼
• gulp-less　　　　//編譯less爲css

gulp的初步瞭解

gulp是一個自動化構建工具，在項目開發階段或部署階段執行一些自動化任務。

gulp能夠幫咱們將書寫的代碼比那位真正可在生產環境中部署的代碼，是實現自動化工做流的主要工具。

gulp的優勢

• 流式構建系統
• 插件衆多
• 使用JavaScript配置
• 底層的計算很是快
• 能夠並行執行任務
• 能夠創造完整的構建體系

gulp相對於grunt的優點

gulp跟grunt同樣支持跨平臺，即支持跨平臺不是gulp獨有的優點，不一樣在於grunt須要Gruntfile.js，gulp須要Gulpfile.js，最核心的不一樣之處在於，gulp是以流爲核心的，而grunt是以配置加上文件io爲核心的。

gulp的安裝

• 先安裝nodejs環境，npm包管理系統就可使用了
• 運行命令npm install -g gulp-cli在npm上下載，並全局安裝gulp，讓gulp成爲命令行接口，就可在命令行中直接使用gulp命令
• 運行命令npm init建立pakeage.json文件，至關於「身份證文件」
• 運行命令npm install --save gulp，將gulp進行本地安裝，全局和本地都安裝了，才能使用。

注意，由於是國外資源，安裝時可以使用cnpm淘寶鏡像來安裝。

gulpfile配置文件

• gulpfile.js文件指導gulp工做
• gulpfile文件中定義多個task，一般向外使用exports關鍵字
• 這些task能夠被gulp 任務名命令運行，默認的task叫作default，它能夠被gulp命令運行

如下是gulpfile.js示例：

// 定義一個個task，task就是普通的函數
function task1() {
    console.log('我是task1！');
    return;// 必須有return，不然gulp會認爲任務沒有執行完畢
}
function task2() {
    console.log('我是task2！');
    return;// 必須有return，不然gulp會認爲任務沒有執行完畢
}
function task3() {
    console.log('我是task3！');
    return;// 必須有return，不然gulp會認爲任務沒有執行完畢
}

// 向外暴露
exports.t1 = task1;
exports.task2 = task2;
exports.t3 = task3;

// 外部使用就是gulp t1
// gulp task2

// 默認暴露
exports.default = task3;// 直接在命令行gulp直接運行

流的使用

• 流是從一個源（source）流向一個終點（destination）的數據的序列
• gulp中，src()函數建立可讀流，dest()函數建立可寫流。這兩個函數組成基本的task
• 流建立成功後，須要使用管道pipe()函數將流導入特定的處理方法。dest()函數也是其中的方法之一。

 如下是使用流的gulpfile.js的代碼示例：

// 引入gulp文件，require表示引入，解構出三個函數
const {src, dest, pipe} = require("gulp");

// 定義task
function task1() {
    // src表示設置流的源頭
    return src("./foo/**/*.txt") // 這裏的一個*表明任意名字，**表明任意目錄，也就是全部目錄，全部文件
        // pipe表示管道，pipe()裏面寫函數
        // dest表示設置流的終點
        .pipe(dest("./bar"));
}

// 暴露
exports.default = task1;

gulp插件基本使用

• 每一個gulp插件都是一個函數，要將它放入pipe()函數中
• pipe()管道能夠鏈式調用（連續打點使用）

gulp使用各類插件的示例：

// 引入gulp文件，require表示引入，解構出三個函數
const {src, pipe, dest, parallel} = require('gulp');
// 引入插件
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const csso = require('gulp-csso');
const htmlMinify = require('gulp-html-minify');
const htmlReplace = require('gulp-html-replace');
const base64 = require('gulp-base64');

function js() {
    return src('./app/js/**/*.js')
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(dest('./dest/js'));
}

function css() {
    return src('./app/css/**/*.css')
        .pipe(base64({
            extentions: ['png'],
            maxImageSize: 500*1024 // bytes 轉換圖片的最大尺寸
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 version', '> 5%', 'firefox > 10', 'ie 6-8']
        }))
        .pipe(csso())
        .pipe(concat('all.min.css'))
        .pipe(dest('./dest/css'));
}

function html() {
    return src('./app/index.html')
        .pipe(htmlReplace({
            css: './css/all.min.css', // 須要在html文件中的link標籤開頭添加<!-- bulid:css -->和結尾添加<!-- endbuild -->
            js: './js/all.min.js'    //js和css同理，改成bulid：js
        }))
        .pipe(htmlMinify())
        .pipe(dest('./dest'));
}


// 暴露
exports.default = parallel(js, css, html);

 

平行運行多個task

• parallel函數用來平行運行多個task
• 平行運行的task沒有前後之分，誰先誰後沒有關係

使用watch()函數實時監控文件變化