gulp 入門

時間 2019-11-11

原文原文鏈接

本文是gulp的入門級介紹，主要內容包括什麼是gulp，gulp與grunt有什麼區別，gulp能夠解決grunt存在的哪些問題，以及一個簡單的說明例子。javascript

什麼是gulp

gulp的官方定義很是簡潔：基於文件流的構建系統。這裏強調了 streaming，也就是gulp與grunt的在構建流程上的主要區別。具體區別在哪裏，後面會簡單介紹。php

另外一個grunt？

相信不少前端的同窗對grunt都不陌生，grunt的出現能夠說是前端的福音，以前不少須要人肉完成的重複工做，用了grunt，一個命令就搞定了。css

說到這裏，不少同窗可能會比較疑問：既然有了grunt，那一樣定位於前端構建的 gulp存在的意義是？從gulp的介紹來看，gulp正是爲了解決前端同窗在使用grunt過程當中遇到的這樣那樣的問題而出現的。是哪些問題呢？在 http://slid.es/contra/gulp 這個slide裏，提到了幾點，好比：html

grunt存在的一些問題

一、插件職能不夠單一前端

二、插件完成了本不應由插件完成的事情（這個我有點迷糊，爲何說是 things don't need to be plugins？）java

三、配置過於複雜nginx

四、因爲糟糕的流程控制致使的臨時文件/目錄sql

Plugins do multiple things
- Want a banner? Use the javascript minifier
Plugins do things that don't need to be plugins

Grunt config format is a mess that tries to do everything

Headache of temp files/folders due to bad flow control

用grunt的方式構建

前面列舉了四點grunt使用過程當中存在的問題，其中一、2點我的以爲略顯牽強，插件職能不夠單一，或者完成了不應由插件完成的事情，這個跟grunt其實關係並不大，更多的應該歸責於插件的做者（固然使用頻率最高的那部分插件的做者就是grunt團隊的兄弟）。npm

比較認同的是後面兩點：複雜的配置、糟糕的流程控制。gulp

配置這個是否複雜就不說太多了，在這點上可能爭議會比較大。而糟糕的流程控制這點是被詬病較多的，尤爲是在規模稍大的項目裏面。下面這張簡圖是grunt目前的工做流程：讀文件、修改文件、寫文件——讀文件、修改文件、寫文件——。。。

問題顯而易見：

一、 效率低下 ：頻繁的磁盤IO會使得構建效率變得低下

二、 沒法有效串聯 ：讀文件、修改文件、寫文件的循環，致使插件與插件以前的工做沒法有效串聯起來。

備註：配圖來自上面提到的slide

舉個例子

好比項目下有個index.html、app.scss、app.js，而index.html裏引用了app.css、app.js，以下所示。假設最終的目的是將編譯壓縮後的app.css、壓縮後的app.js 內聯到index.html裏，同時要保留壓縮前的app.css、app.js源文件，那麼過程可能以下：（不必定徹底準確）

一、將index.html、app.js、編譯生成的app.css 拷貝到 dist/ 下

二、壓縮 app.js、app.css，並生成到臨時目錄 .tmp/ 下

三、將 .tmp/app.js、.tmp/app.css 內聯到 dist/index.html裏

<html> <head> <link type="text/css" rel="stylesheet" href="app.css" /> </head> <body> <script src="app.js"></script> </body> </html>

用gulp的方式構建

從上面的構建流程能夠看到，屢次文件讀寫以及臨時目錄就這樣以一種難以免的姿態出現了。在gulp做者的構想裏，合理的構建流程應該是這樣的：讀取文件——修改文件——修改文件。。。——寫文件（配圖來自前面提到的slide）

按照這種設想，上面舉的例子用gulp重寫，過程應該是這樣

一、讀文件：讀取index.html、app.js、app.css（讀文件）

二、編譯、壓縮app.css，壓縮app.js（處理文件流）

三、將A、B內聯到index.html中（仍是處理文件流）

四、 寫文件 ：將最終生成地結果寫到 dist/ 目錄下（修改後的index.html、編譯後的app.css、未修改過的app.js）

壓縮文件的簡單例子

一、首先全局安裝gulp命令行工具（至關於grunt-cli）

npm install -g gulp

二、而後，在項目下安裝gulp（至關於grunt）、gulp-uglify

npm install --save-dev gulp gulp-uglify

三、在項目根目錄下建立 gulpfile.js

var gulp = require('gulp'), uglify = require('gulp-uglify'); gulp.task('default', function(){ gulp.src('src/app.js') .pipe(uglify()) .pipe(gulp.dest('dist/')); });

我本身測試的，效果很不錯哦只是寫的不是很美觀

var gulp = require('gulp');
// 獲取 minifycss 模塊（用於壓縮 CSS）
   minifycss = require('gulp-minify-css'),
   minifyjs = require('gulp-uglify'),
   del = require('del');


gulp.task('minifycss', function() {
　　//這是經常使用配置文件
    var options = {
        removeComments: true,  //清除HTML註釋
        collapseWhitespace: true,  //壓縮HTML
        collapseBooleanAttributes: true,  //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,  //刪除全部空格做屬性值 <input id="" /> ==> <input />
       // removeScriptTypeAttributes: true,  //刪除<script>的type="text/javascript"
       // removeStyleLinkTypeAttributes: true,  //刪除<style>和<link>的type="text/css"
       // minifyJS: true,  //壓縮頁面JS
        minifyCSS: true  //壓縮頁面CSS
    };

    return gulp.src('./css/*.css')      //壓縮的文件
        .pipe(minifycss(options))
        .pipe(gulp.dest('minifycss/css'))   //輸出文件夾
        .pipe(minifycss());   //執行壓縮
});

gulp.task('minifyjs', function() {

//這是經常使用配置文件

var options = {

        removeComments: true,  //清除HTML註釋
        collapseWhitespace: true,  //壓縮HTML
        collapseBooleanAttributes: true,  //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,  //刪除全部空格做屬性值 <input id="" /> ==> <input />
       // removeScriptTypeAttributes: true,  //刪除<script>的type="text/javascript"
       // removeStyleLinkTypeAttributes: true,  //刪除<style>和<link>的type="text/css"
        minifyJS: true,  //壓縮頁面JS
       // minifyCSS: true  //壓縮頁面CSS
    };

    return gulp.src('./js/*.js')      //壓縮的文件
        .pipe(minifyjs(options))
        .pipe(gulp.dest('minifyjs/js'))   //輸出文件夾
        .pipe(minifyjs());   //執行壓縮
});
//執行壓縮前，先刪除文件夾裏的內容
gulp.task('clean', function(cb) {
   del(['minifycss/css','minifyjs'], cb);//刪除原有文件
});

gulp.task('default', function() {
    gulp.start('minifycss');