前端 | gulp 打包 require.js 模塊依賴

背景

項目JS腳本是使用 require.js 來組織

在依賴沒有打包以前，加載是這樣

請求太多，一個有潔癖的人確定是受不了的，故需求就產生了，打包 require.js 模塊代碼依賴

工具

我使用 gulp 做爲前端任務管理器，使用 amd-optimize 來打包require.js 模塊依賴 有人說此插件下載量過低，不敢用，我也就呵呵了，工具是用來解決問題的，不是給人看的,實在不行，查看源代碼本身造個輪子也不錯

文件結構

我是用上圖中的 test.js 做爲打包入口文件

test 代碼以下：

require(["require-config"], function() {
    require([
        'xxxxxxx1',
        'xxxxxxx2',
        'xxxxxxx3',
        'xxxxxxx4',
    ]);
});

gulp 任務函數

var concatFile = require('gulp-concat')
  , uglifyJS = require('gulp-uglify')
  , shell = require('gulp-shell')
  , amdOptimize = require('amd-optimize');

gulp.task('bundle', function () {
  return gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false
    }))
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS('test.js'))
    .pipe(gulp.dest('./jsbuild/'));
});

運行任務以後，文件已經打包指定目錄
注意： 任務函數中我沒有壓縮，用意等下解釋

問題

• debug 環境下加載了 require-config.js
• production 環境使用的是打包後的模塊文件，即 ./jsbuild 中的 test.js 沒有加載 require-config.js,至於緣由：由於模塊依賴已經打包到一個文件中，已經沒有必要加載 require-config.js

可是生產環境測試發現：

發現仍是有不少請求發生，也就是說打包沒有起到做用

查看生成的 ./jsbuild/test.js 文件，直接查看最後幾行代碼 就會發現

發現打包後的文件中包含了 require-config.js 的內容，在插件的配置選項中沒有發現去除包含 require.js 配置文件的選項 【若是你發現了，請分享下，萬分感謝】

不得已採用 shell 處理，修改後的任務函數以下

gulp.task('isport:desk', function() {
  gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false
    }))
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS())
    .pipe(gulp.dest('./jsbuild/'))
    .pipe(shell([
      "sed '/require.config({/, $d' ./jsbuild/test.js > ./jsbuild/test-mini.js",
      "rm ./jsbuild/test.js"]));

  return gulp.src('./jsbuild/test-mini.js')
    .pipe(uglifyJS())
    .pipe(gulp.dest('./jsmini'));
});

運行任務後，在debug tools 中查看結果

經過發現，乾淨了，心情舒暢了

後記

實話說這種方法打包並非很完美，至於完美的方法一直在不斷的探索中