Package Exports

gulp-moder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gulp-moder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gulp-moder

Gulp plugin for Moder.js

前端模块加载器 Moder.js 构建工具，辅助自动生成模块 Map。

使用方法

安装命令：

$ npm install gulp-moder --save-dev

Gulp 任务配置 Gulpfile.js：

/**
 * Gulp.js 构建文件
 * 
 * @author Pandao
 * @updateTime 2016-04-17
 */

var fs      = require("fs");
var gulp    = require('gulp');
var clean   = require('gulp-clean');
var notify  = require('gulp-notify');
var uglify  = require('gulp-uglify');
var rename  = require('gulp-rename');
var conact  = require('gulp-concat');
var replace = require('gulp-replace');
var header  = require('gulp-header');
var moder   = require('../index');

// 定义源文件目录
moder.srcPath = "./modules/";

// 定义目标输出目录
moder.destPath = "./output/";

/**
 * 打包一个包模块文件，即一个文件中有多个 define
 */ 

gulp.task('pkg', function() {
    return gulp.src(['modules/*.js'])
               .pipe(conact('pkg2.js'))
               .pipe(header("//@modulePackage pkgB\n")) // 在头部插入一个包名标签
               .pipe(gulp.dest("modules/pkg/"))
               .pipe(notify({ message: "pkg task completed!" }));
});

/**
 * 清空目标输出目录
 */ 

gulp.task('clean', function() {
    return gulp.src('./output/**/*.js')
               .pipe(clean())
               .pipe(notify({ message: "clean task completed!" }));
});

/**
 * 自动加模块名和生成模块 Map
 */ 

gulp.task("map", ["clean"], function() {
    return gulp.src("modules/**/*.js")
        .on('end', function() { 
            // 追加 Map
            /*moder.appendMap = {
                pkg : {
                    'pkgB' : {
                        deps : ['a', 'b', 'c', 'c/main'],
                        url  : 'pkg_d34rbfvh6645.js'
                    }
                }
            };*/

            // 替换模板页中的 Map 标签，并输出最终页面文件
            moder.replaceMap('./test.tpl.html', './test.html', /({{\$map}})/g, function(map) {
                //console.log('moder.replaceMap =>', JSON.stringify(map));
            });

            // 将模块 Map 输出为 json 文件，方便给 PHP include
            moder.writeMapToJSON('./map.json', function(map) {
                //console.log('moder.jsonMap =>', JSON.stringify(map));
            });
        })
        .pipe(moder.build())
        .pipe(uglify())
        //.pipe(moder.rename()) // 如果要使用 cart.list_707594a1.js 这种方式重命名文件才调用这个方法
        .pipe(gulp.dest(moder.destPath))
        .pipe(notify({ message: "Map task completed!" }));
});

gulp.task('watch', function() {
    gulp.watch('modules/**/*.js', ['map']);
    gulp.watch('test.tpl.html', ['map']);
});

gulp.task("default", ["pkg", "map"]);

标签语法：

用于自动生成模块 Map，注意标签必须靠左边顶格写（左边无空格）。

1、单文件单个模块

//@moduleName xxxx        // 模块名
//@moduleDeps xxx,xxx,... // 模块依赖

define(function(require, exports, module){
    // 禁止在 define 里 define
    module.exports = {
        foo : 'bar'
    };
});

在 define 内通过 require.async('xxx', function(){//...}); 方式调用的模块不需要定义在 //@moduleDeps 模块依赖中。

2、包模块文件，即一个文件内有多个模块 define

//@modulePackage xxxx     // 包名

//@moduleName xxxx        // 模块名
//@moduleDeps xxx,xxx,... // 模块依赖

define(function(require, exports, module){
    module.exports = {
        foo : 'bar'
    };
});

//@moduleName xxxx        // 模块名
//@moduleDeps xxx,xxx,... // 模块依赖

define(function(require, exports, module){
    module.exports = {
        foo : 'bar'
    };
});

//@moduleName xxxx        // 模块名
//@moduleDeps xxx,xxx,... // 模块依赖

define(function(require, exports, module){
    module.exports = {
        foo : 'bar'
    };
});

生成结果：

./output
    /pkg
        all_3aa20277.js
        pkg2_d3903ca2.js
    /c
        main_2f3dd68c.js
    /view
        info_fd175e15.js
        ...
    /component
        cart.list_707594a1.js
        ...
    ...

当配置项 versionQuery = true（v0.1.4 起新增，默认为 true）且不调用 moder.rename() 方法时，模块文件的 URL 形式为 /component/cart.list.js?v=707594a1，用于保证文件始终存在，避免无法请求到文件。

调用模块：

require(['模块1', '模块2'], function(m1, m2) {
    console.log(m1, m2);
});

License

The MIT license.