gulp打包amd工程

時間 2019-11-07

原文原文鏈接

工程介紹：

該工程提供一系列web基礎控件，按照amd模塊規範進行開發（工程目錄以下圖所示）；
src目錄爲控件源碼及第三方包代碼；
build目錄爲構建腳本目錄，其中main.js爲工程入口文件；
dist目錄爲源碼編譯後生成的目錄；javascript

任務目標：

按照入口文件（build/main.js）的配置，按依賴關係將 src/common/ 和 src/components/ 兩個目錄下的js源碼合併壓縮成一份js文件。html

入口文件：

按照項目需求進入必要的控件，最終腳本將按照所需範圍進行打包合併；java

// 按需引入控件
require(["combo", "scrollbox", "pagination", "checkbox"]);

腳本文件：

var concat = require('gulp-concat'),    // 合併js
    uglify = require('gulp-uglify'),    // 壓縮js
    rename = require('gulp-rename'),    // 重命名
    amdOptimize = require('amd-optimize'),  // 處理amd依賴
    eslint = require('gulp-eslint');    // 語法檢查

// 語法檢查
gulp.task('lint', () => {
    return gulp.src(['../src/common/**/*.js','../src/components/**/*.js'])
        .pipe(eslint())
        .pipe(eslint.format());  // 把檢測結果輸出到console.
});

// 拷貝第三方包
gulp.task('movelib', () => {
    return gulp.src('../src/lib/require/**')
            .pipe(gulp.dest('../dist/lib/require'));
})

// 壓縮,合併 js
gulp.task('bundle', () => {
    return gulp.src([
            '../src/common/base/*.js',
            '../src/components/**/*.js'
        ])      // 須要操做的文件
        .pipe(amdOptimize('main', {
            paths: {
                "jquery": "../src/lib/jquery/jquery",

                "prototype": "../src/common/base/prototype",
                "core": "../src/common/base/core",
                "component": "../src/common/base/component",

                "scrollbox": "../src/components/scrollbox/scrollbox",
                "combo": "../src/components/combo/combo",
                "pagination": "../src/components/pagination/pagination",
                "checkbox":"../src/components/checkbox/checkbox"
            }
        }))    // 處理依賴關係
        .pipe(concat('main.js'))    // 合併全部js到main.js
        .pipe(gulp.dest('../dist/js'))       // 指定輸出位置
        .pipe(rename({suffix: '.min'}))   // 重命名壓縮後的文件名
        .pipe(uglify())    // 壓縮
        .pipe(gulp.dest('../dist/js'));  // 輸出
});

// 默認任務
gulp.task('default', ['lint'], () => {
    gulp.start('movelib', 'bundle');
});

頁面開發：

index.htmljquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
  <div class="desk"></div>
  <script src="lib/require/require.js" data-main="js/main.min"></script>
  <!--業務代碼-->
  <script src="index-main.js"></script>
</body>
</html>

index-main.jsweb

require(["main"], function() {
    
    // 能夠直接使用入口文件中引用的4個控件
    
});

附錄：

腳本中所包含的依賴以下，可添加至 package.json 文件，使用命令 npm i 進行安裝。npm

"devDependencies": {
    "amd-optimize": "^0.6.1",
    "eslint": "^3.12.2",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-eslint": "^3.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0"
  }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。