gulp實時編譯less，壓縮合并requirejs模塊文件

發(fā)布時間：2017年02月06日作者：文章轉自網(wǎng)絡，版權歸原作者所有，反饋可立刻刪除 (該文來自筆記，點擊查看原文)

gulp的使用命令簡單，就幾個，gulp的簡單使用教材可以參考一點的gulp使用教材（http://www.ydcss.com/archives/18）。

下面就簡單的介紹這些命令如何互相配合的完成前端的構建工作。

項目結構：

電腦培訓,計算機培訓,平面設計培訓,網(wǎng)頁設計培訓,美工培訓,Web培訓,Web前端開發(fā)培訓

首先全局安裝gulp，使用命令：npm install -g gulp

一：gulp實時編譯less

var gulp = require('gulp');

var gulpLess = require('gulp-less');

var gulpMinifyCss = require('gulp-minify-css');

var gulpSourcemaps = require('gulp-sourcemaps');

　　這4個插件就是目前用到的，需要其他功能可以自己添加。gulp-less是編譯less用的插件，gulp-minify-css是壓縮css的插件，gulp-sourcemaps是便于壓縮后代碼調試的。

gulp.task('allLess', function(){
    gulp.src('src/less/**/*.less')
        .pipe(gulpSourcemaps.init())//sourcemaps
        .pipe(gulpLess())//編譯less        .pipe(gulpSourcemaps.write())
        .pipe(gulp.dest('src/css/'))
        .pipe(gulpMinifyCss())//壓縮css        .pipe(gulpSourcemaps.write())
        .pipe(gulp.dest('dist/css/'));
});

gulp.watch('src/less/**/*.less', ['allLess']);

gulp.task('default', ['allJs', 'allLess']);

gulp.src('src/less/**/*.less')：src/less/下任意目錄下的less文件，**代表任意單個或多個目錄，*.less表示已less后綴結尾的文件。

gulp.watch('src/less/**/*.less', ['allLess']);這條是監(jiān)聽src/less目錄下的任意less文件的變化，有變化就會調用allLess任務編譯變化的less文件。

　gulp實時編譯less就是這么簡單了。還可以加入對圖片的壓縮控制。

二：gulp壓縮合并requirejs加載的js模塊文件

在前端代碼量越來越多的情景下，js模塊化編程孕育而生，AMD模式的模塊采用requirejs來加載模塊。模塊化編程讓前端js代碼規(guī)范整潔之外，也導致了瀏覽器對

js請求數(shù)量增多，這個時候，就需要對相應的模塊進行合并，并且壓縮代碼，減少請求，縮短頁面響應時間。

一些需要的模塊：

var fs = require('fs');var paths = require('path');var rjs = require('requirejs');

合并壓縮用的是requirejs的optimize方法,

先定義一些變量：

// 配置目錄var jsDir = 'src/js';// 所有要編譯的js模塊var jsModules = [], ctrlModules = [],
    commModules = [
        {
            name: "lib/common",
            exclude: []
        }
    ];

合并壓縮代碼的思路就是要告訴requirejs哪些模塊需要合并到文件中，哪些模塊要單獨打包，不用合并到文件中，并且單獨請求。也就是要先遍歷你的邏輯js文件，

把名稱和需要過濾的模塊名稱存到變量中，然后傳遞給requirejs的optimize方法。下面是變量controller下的js文件。

// 初始化controller下所有要編譯的js模塊function initJsPath(path){
    path = path || jsDir + '/controller';    var files = fs.readdirSync(path);/*讀取目錄下的所有文件名稱，返回名稱數(shù)組，如果文件名是目錄，該目錄下面的文件不會讀取*/
    console.log(files);
    files.forEach(function(item) {        var tmpPath = path + '/' + item,
            stats = fs.statSync(tmpPath);        if (stats.isDirectory()) {//目錄            initJsPath(tmpPath);
        } else {//文件
            if (tmpPath.slice(-3)=='.js') {
                ctrlModules.push({
                    name: tmpPath.slice(jsDir.length + 1, -3),
                    exclude: ['lib/common']
                });
            }
        }
    });
    console.log(ctrlModules);
}

gulp中定義的任務是：

gulp.task('allJs', function(cb){
    console.log('======================================= start optimize js ==========================================');    //收集js文件名稱    initJsPath();

    jsModules = commModules.concat(ctrlModules);

    rjs.optimize({
        baseUrl: 'src/js',
        dir: 'dist/js',
        findNestedDependencies : false,   //代碼內部寫的require也計算在打包內
        preserveLicenseComments : false,  //去掉頭部版權聲明
        removeCombined: false,            //自動刪除被合并過的文件        modules: jsModules
    }, function(){
        cb();
    }, cb);

});

baseUrl目錄下的文件都會被壓縮，modules中的模塊會被合并并且壓縮，合并壓縮后存儲到dist/js目錄下面。commModules中存儲的是我們項目的公共模塊文件，

需要單獨合并壓縮抽離出來，這個文件不會被合并到其他模塊文件中，而且會被單獨請求。相關參數(shù)的配置信息大家可以看官網(wǎng)。

下面看看實驗:

index.html:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><script>
    window.ENV = 1;</script><body><p class="msg">hello rjs</p></body><script src="src/js/require.js"></script><script>
    require(['src/js/config.js'], function(){
        require(['controller/order/orderDetail']);
    });</script></html>

requirejs 的config配置文件：

/**
 * Created by jiaan.zhou on 2017/2/3. */var BASEURL = ((window.ENV == 1) || (window.ENV == 2 && location.hash === '#debugon')) ? 'src/js': 'dist/js';

require.config({
    waitSeconds: 2000,
    baseUrl : BASEURL,
    paths : {},
    urlArgs : 'v=' + new Date().getTime()
});

沒有合并的orderDetai.js文件：

/**
 * Created by jiaan.zhou on 2017/2/3. */define('controller/order/orderDetail', ['widget/swipe'], function(widgetSwipe){
    console.log('controller/order/orderDetail');
    $('.msg').html('success');
});

合并后的orderDetai.js文件：

define("widget/swipe",["lib/common"],function(e){function o(){this.name="swipe",console.log("hello swipe")}return new o}),define("controller/order/orderDetail",["widget/swipe"],function(e){console.log("controller/order/orderDetail"),$(".msg").html("success")});

沒有合并模塊之前的請求：

電腦培訓,計算機培訓,平面設計培訓,網(wǎng)頁設計培訓,美工培訓,Web培訓,Web前端開發(fā)培訓

從圖中我們可以看到所有的模塊按照加載順序進行請求，每個模塊對應一個請求。

合并模塊后的請求：

電腦培訓,計算機培訓,平面設計培訓,網(wǎng)頁設計培訓,美工培訓,Web培訓,Web前端開發(fā)培訓

合并后，swipe模塊已經(jīng)合并到orderDetai文件中，zepto和fastclick模塊合并到commonjs文件中，這樣就減少的請求，而且代碼也得到壓縮。

分類導航

gulp實時編譯less，壓縮合并requirejs模塊文件

延伸閱讀

我想了解如何學習