前端讀者 | 前端構建工具Gulp

@羯瑞 整理

前言

前端工具如今層出不窮，網上搜下一大片，就看你怎麼去使用了，基於項目看用什麼樣的構建工具。有的工具提供的功能仍是很是強大的。

• FIS。百度團隊的產品。如今百度的多個產品中使用。面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合併、內嵌）、模塊化開發、自動化工具、開發規範、代碼部署等問題。學習成本相對比較高。官網
• CodeKit。自動編譯Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件致力於js文件合併和壓縮，以及js語法錯誤檢查同時還支持Compass(Sass伴侶)。這個只是知道而已沒去深究，貌似百度搜文文章也很少。官網
• yeoman。Google的團隊和外部貢獻者團隊合做開發的，他的目標是經過Grunt（一個用於開發任務自動化的命令行工具）和Bower（一個HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝爲開發者建立一個易用的工做流。官網
• Bower。一個客戶端技術的軟件包管理器，它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。其餘一些創建在Bower基礎之上的開發工具，如YeoMan和Grunt。官網
• webpack。一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。官網

有興趣的能夠去了解下，上面的我也是隻知其一;不知其二的。

本文主角

構建工具大多都是居於nodejs下的。

提及gulp,就不得說下grunt。相信 不少小夥伴都會在網上看到它倆在一塊兒的。下面是摘抄網上的對比：

• 易用 Gulp相比Grunt更簡潔，並且遵循代碼優於配置策略，維護Gulp更像是寫代碼。
• 高效 Gulp相比Grunt更有設計感，核心設計基於Unix流的概念，經過管道鏈接，不須要寫中間文件。
• 高質量 Gulp的每一個插件只完成一個功能，這也是Unix的設計原則之一，各個功能經過流進行整合並完成複雜的任務。例如：Grunt的imagemin插件不只壓縮圖片，同時還包括緩存功能。他表示，在Gulp中，緩存是另外一個插件，能夠被別的插件使用，這樣就促進了插件的可重用性。目前官方列出的有673個插件。
• 易學 Gulp的核心API只有5個，掌握了5個API就學會了Gulp，以後即可以經過管道流組合本身想要的任務。
• 流 使用Grunt的I/O過程當中會產生一些中間態的臨時文件，一些任務生成臨時文件，其它任務可能會基於臨時文件再作處理並生成最終的構建後文件。而使用Gulp的優點就是利用流的方式進行文件的處理，經過管道將多個任務和操做鏈接起來，所以只有一次I/O的過程，流程更清晰，更純粹。
• 代碼優於配置 維護Gulp更像是寫代碼，並且Gulp遵循CommonJS規範，所以跟寫Node程序沒有差異。

gulp安裝

先來講下npm工具，npm是隨同NodeJS一塊兒安裝的包管理工具,裝了node會默認裝上npm工具。### 前言
前端工具如今層出不窮，網上搜下一大片，就看你怎麼去使用了，基於項目看用什麼樣的構建工具。有的工具提供的功能仍是很是強大的。

1. 安裝gulp以前，先安裝nodejs環境，由於gulp是基於nodejs的前端構建工具。window平臺下直接安裝，一直下一步就行。百度搜下node官網就下獲得安裝包。
2. 全局安裝gulp。cmd模式下執行下面代碼，--global全局安裝。

npm install --global gulp

1. 在開發項目上，安裝項目依賴。若是gulp全局安裝了，就不會再從新下載了。此操做會在項目目錄中生成一個package.json依賴文件。--save生產環境，-dev開發環境。通常二者都會一塊兒用。這個在package.json能夠看出來區別。

npm install --save-dev gulp

1. 在項目中新建gulpfile.js文件，寫流程代碼。下面是項目中用到的：

// 載入插件
var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),//瀏覽器刷新工具
    imagemin = require('gulp-imagemin'),//圖片壓縮
    tinypng = require('gulp-tinypng-nokey');//tinypng圖片壓縮
    minifycss = require('gulp-minify-css'),//css壓縮
    uglify = require('gulp-uglify'),//js壓縮
    jshint = require('gulp-jshint'),//js語法檢測
    rename = require('gulp-rename'),//重命名
    gclean = require('gulp-clean'),//清除文件
    cache = require('gulp-cache'),//獲取文件cache
    minimist = require('minimist');//截取傳參
    
/**
 * 默認參數：vurl(模版路徑)，wurl(靜態資源路徑)，ourl(輸出路徑)
 * imagemin: 圖片壓縮，已經捨棄。壓縮效果不怎麼好，支持所有圖片格式
 * clean: 清除輸出文件夾，防止輸出的東西重疊，或者能夠自定義不一樣文件夾的名稱
 * server: 實時刷新測試，自定義域名，自定義監聽模版文件和靜態資源
 * picmin: 圖片壓縮基於tinypng,壓縮率高，質量好。僅支持png,jpg。api請求因此會慢點
 * cssmin: css文件壓縮
 * jsmin: js文件壓縮
 * allmin: cssmin+jsmin+picmin 
 * 
 * 優化內容：都自定義傳遞參數路徑，符合咱們一個系統多個站點的痛點;優化內存佔用;引入緩存機制
 * gulp imagemin --wurl ffsm/baobaoqm
 * gulp clean --ourl aa_gulp_out
 * gulp server --host dev.d1xz.net --vurl ffsm/view/qf --wurl ffsm/qf/diandeng
 * gulp picmin --wurl ffsm/baobaoqm [--ourl aa_gulp_out]
 * gulp cssmin --wurl ffsm/baobaoqm [--ourl aa_gulp_out]
 * gulp jsmin --wurl ffsm/baobaoqm [--ourl aa_gulp_out]
 * gulp allmin --wurl ffsm/baobaoqm [--ourl aa_gulp_out]
 */

var viewUrl='d1xz/shuipf/application/';
var wwwUrl='d1xz/www/statics/';

// 獲取配置參數
var options = minimist(process.argv.slice(2));
//IMG壓縮 支持GIF、PNG、JPG壓縮率不高
gulp.task('imagemin',['clean'],function(){
    if(options.wurl){
        var thisUrl = wwwUrl+''+options.wurl;
        var outUrl = options.ourl?options.ourl:thisUrl;
        console.log('壓縮地址路徑：'+thisUrl);
        console.log('輸出地址路徑：'+outUrl);
        gulp.src([wwwUrl+''+options.url+'/*.{gif,png,jpg,jpeg}',wwwUrl+''+options.url+'/**/*.{gif,png,jpg,jpeg}'])
        .pipe(imagemin())
        .pipe(gulp.dest(outUrl));
    }else{
        console.log('配置參數錯誤;例：gulp imagemin --wurl ffsm/baobaoqm');
    }   
});
// 清除輸出文件
gulp.task('clean', function() {
    if(options.ourl){
        return gulp.src(options.ourl, {read: false}).pipe(gclean());
    }else{
        console.log('配置參數錯誤;例：gulp clean --ourl aa_gulp_out');
    }
});
//HTML實時預覽
gulp.task('server', function() {
    console.log('爲減小系統cpu、內存佔用，請寫全路徑;');
    if(options.host){
        browserSync.init({
            proxy:options.host,//動態域名
            notify: false,//刷新是否提示
            open: true,//是否自動打開頁面
            timestamps: true
        });
        //監聽文件變化數組
        var vurl=viewUrl+''+options.vurl;
        var wurl=wwwUrl+''+options.wurl;
        console.log('監聽模版文件路徑：'+vurl);
        console.log('監聽靜態文件路徑：'+wurl);
        gulp.watch([vurl+'/*.*',vurl+'/**/*.*',wurl+'/*.*',wurl+'/**/*.*']).on("change", browserSync.reload);
    }else{
        console.log('配置參數錯誤;例:gulp server --host dev.d1xz.net --vurl ffsm/view/qf --wurl ffsm/qf/diandeng');
    }
    
});
// 圖片壓縮tinypng，api請求速度會慢點;只能壓縮PNG和JPG
gulp.task('picmin', function () {
    if(options.wurl){
        var thisUrl = wwwUrl+''+options.wurl;
        var outUrl = options.ourl?options.ourl:thisUrl;
        console.log('壓縮地址路徑：'+thisUrl);
        console.log('輸出地址路徑：'+outUrl);
        gulp.src([thisUrl+'/*.{png,jpg,jpeg}',thisUrl+'/**/*.{png,jpg,jpeg}','!'+thisUrl+'/layer/**/*.{png,jpg,jpeg}'])
            .pipe(cache(tinypng()))
            .pipe(gulp.dest(outUrl));
    }else{
        console.log('配置參數錯誤;例：gulp picmin --wurl ffsm/baobaoqm');
    }
});
// css壓縮
gulp.task('cssmin', function() {
    if(options.wurl){
        var thisUrl=wwwUrl+''+options.wurl;
        var outUrl = options.ourl?options.ourl:thisUrl;
        console.log('壓縮地址路徑：'+thisUrl);
        console.log('輸出地址路徑：'+outUrl);
        gulp.src([thisUrl+'/*.css',thisUrl+'/**/*.css','!'+thisUrl+'/**/*.min.css','!'+thisUrl+'/**/layer/**/*.css','!'+thisUrl+'/**/layui/**/*.css','!'+thisUrl+'/**/layer_mobile/**/*.css','!'+thisUrl+'/**/layer_mobile/**/*.css',,'!'+thisUrl+'/**/swiper/**/*.css','!'+thisUrl+'/**/swiper/**/*.css','!'+thisUrl+'/**/libs/**/*.css','!'+thisUrl+'/**/libs/*.css'])
        .pipe(minifycss())  //執行壓縮
        .pipe(rename({suffix: '.min'}))   //重命名
        .pipe(gulp.dest(outUrl));  //輸出文件夾
    }else{
        console.log('配置參數錯誤;例：gulp cssmin --wurl ffsm/baobaoqm');
    }
});
// js壓縮
gulp.task('jsmin', function() {
    if(options.wurl){
        var thisUrl=wwwUrl+''+options.wurl;
        var outUrl = options.ourl?options.ourl:thisUrl;
        console.log('壓縮地址路徑：'+thisUrl);
        console.log('輸出地址路徑：'+outUrl);
        gulp.src([thisUrl+'/**/*.js',thisUrl+'/*.js','!'+thisUrl+'/**/*.min.js','!'+thisUrl+'/**/layer/**/*.js','!'+thisUrl+'/**/layui/**/*.js','!'+thisUrl+'/**/require/**/*.js','!'+thisUrl+'/**/require/*.js','!'+thisUrl+'/**/layer_mobile/**/*.js','!'+thisUrl+'/**/layer_mobile/**/*.js','!'+thisUrl+'/**/swiper/**/*.js','!'+thisUrl+'/**/swiper/**/*.js','!'+thisUrl+'/**/libs/**/*.js','!'+thisUrl+'/**/libs/*.js'])
        .pipe(jshint())
        .pipe(uglify())  //執行壓縮
        .pipe(rename({suffix: '.min'}))   //重命名
        .pipe(gulp.dest(outUrl));  //輸出文件夾
    }else{
        console.log('配置參數錯誤;例：gulp jsmin --wurl ffsm/baobaoqm');
    }
});
// 所有壓縮
gulp.task('allmin', function(){
    gulp.start('cssmin', 'jsmin', 'picmin');
});

1. 上面的註釋都寫的很清楚了，就很少闡述了。相關的能夠去npm官網搜索相關插件看下具體的用法就好了。

一些問題

• 協同開發怎麼共用gulp
  package.json文件裏寫的插件依賴就派上用場了。在項目中直接執行下面代碼就能夠自動所有安裝依賴插件了：

npm install

• npm下載緩慢

可使用淘寶鏡像具體用法移步：>淘寶npm鏡像

//臨時安裝
npm --registry https://registry.npm.taobao.org install express

//持久安裝(替換npm的源地址)
npm config set registry https://registry.npm.taobao.org

//安裝cnpm(推薦)
npm install -g cnpm --registry=https://registry.npm.taobao.org