View on GitHub

Yinjie - GitHub.io

Welcome to the Yinjie's notes

gulp-cmd-nice 使用方法

虽说 seajs 有自己的构建打包工具 spm,但受众面较小,相对 gulp 或 grunt 的万金油体质,其实用价值也较小。已有的项目在实际情况下也不太可能为了这一处而改变整个的构建系统。

在这里先吐糟一下 seajs 。
不是说 seajs 不好,作为 github 上最‘火爆’的国内项目之一,其技术含量和应用价值是值得肯定的,国内很多大公司也都在使用。个人认为其提出的 CMD 规范在写法上也比 requireJS 的 AMD 规范更优雅些。上手更简单,也更贴近 nodejs 的写法。(你要在这里硬拉 webpack/browserify 进来就当我没说~~~ !-_-)
但是~~~(开始吐糟了…)
seajs 有个国内项目都普遍存在的问题,后续的更新和生态的完善。
相对竞品 requireJS, seajs 的模块合并麻烦。需要配套使用SPM工具,导致整个构建系统都得为此考虑。虽然有对应的 seajs-combo,但还需要部署端的支持。开发文档较混乱。
更麻烦的一点是 cmd 规范目前还不被国外承认,导致很多的第三方JS库(甚至 jquery)并不支持 seajs 的引用,需要手动对此进行代码上的修改,这就无形的提高了使用的门槛,许多初学者都摸不到头脑,让本身上手简单的优势一下消失殆尽。

目前笔者公司项目构建框架使用 gulp ,也为此有点头疼,写过一个 gulp-seajs-combo 的打包插件,但对于模糊标准的 seajs 插件的打包会出问题,后来找到一个 gulp-cmd-nice 的 gulp 插件,是参照 spm 的相关功能编写的,功能很强大的,特在此简述一下。

基础的使用就不在这里详说了,直接整有用的

CMD 模块标准化

此功能是对 CMD 模块打上 ID 和 依赖的模块,完善 define(ID, [dependencies], function) 三部分。

var base_path = './src',
    js_path = base_path + '/project';
    
var DEST_PATH = './build',
    DEST_JS_PATH = DEST_PATH + '/project';
    
   
gulp.src(js_path, {
        base: base_path
    })
    .pipe(cmdnice.cmdTransport({
        useCache: true,
        rootPath: path.join(process.cwd(), base_path),
        paths: [
            path.join(process.cwd(), base_path)
        ],
        alias: {          //cmd-nice 在指定alias 的情况下会把其中的 ID 换成真实路径
            //'jquery': 'lib/jquery/1.11.3/jquery'
        },
        aliasPaths: {}
    }))
    .pipe(gulp.dest(DEST_PATH));

CMD 合并

gulp.src(DEST_JS_PATH + '/**/*.js', { read: false })
    .pipe(cmdnice.cmdConcat({
        paths: [path.join(process.cwd(), DEST_PATH)],     //此路径为已经通过上步骤标准化后的 js 文件根目录
        include: "all",
        ignore: [],             //需要乎略的模块
        separator: "",          //合并的分隔符
        filters: false
    }))
    .pipe(uglify({
        mangle: {except: ['define', 'require', 'module', 'exports', '$']}
    }))
    .pipe(gulp.dest(DEST_PATH_JS));