gulp打包amd工程

SeekerTime

2019-06-21

关注关注

工程介绍：

该工程提供一系列web基础控件，按照amd模块规范进行开发（工程目录如下图所示）；
src目录为控件源码及第三方包代码；
build目录为构建脚本目录，其中main.js为工程入口文件；
dist目录为源码编译后生成的目录；

gulp打包amd工程

任务目标：

按照入口文件（build/main.js）的配置，按依赖关系将 src/common/ 和 src/components/ 两个目录下的js源码合并压缩成一份js文件。

入口文件：

按照项目需求进入必要的控件，最终脚本将按照所需范围进行打包合并；

// 按需引入控件
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.html

<!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.js

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

附录：

脚本中所包含的依赖如下，可添加至 package.json 文件，使用命令 npm i 进行安装。

"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"
  }

gulp pagination