gulp-seed

gulp-seed基于gulp开发，是天猫前端通用的构建插件，它的主要功能是：

• KMD模块依赖提取、编译
• 代码检查（主要是文件编码检查与调试代码扫描）
• 代码压缩

Install

一、安装gulp 命令行工具

$ npm install -g gulp #安装gulp cli

ps:unix环境可能需要sudo权限

二、在项目目录安装gulp 和 gulp-seed

$ npm install --save-dev gulp
$ npm install --save-dev gulp-seed

三、创建gulpfile.js

在项目根目录下创建gulpfile.js，编写构建脚本，例如：

var path = require('path');
var gulp = require('gulp');
var code = require('gulp-seed');
//引入包配置
var pkg = require('./package.json');

//注册css构建任务
gulp.task('css', function () {
  return gulp.src('src/**/*.css')
    .pipe(code.lint())       //css代码检查
    .pipe(code.minify())     //css代码压缩
    .pipe(gulp.dest('build/'))
});

//注册js构建任务
gulp.task('js', function () {
  return gulp.src('src/**/*.js')
    .pipe(code.lint())       //js代码检查
    .pipe(code.dep({
      name: pkg.name,
      path: 'http://g.tbcdn.cn/tm/' + pkg.name + '/' + pkg.version + '/',
      exports:["*"]
    }))
    .pipe(code.minify())     //js代码压缩
    .pipe(gulp.dest('build/'))
});

//注册一个默认任务
gulp.task('default', ['css', 'js']);

Usage

在项目根目录下执行

$ gulp

这样就完成了你的前端js和css文件的代码检查、依赖提取和代码压缩过程。

Configuration

code.dep

• name {String} 包名
• path {String} 包路径
• replacePathInJSWithVar {String} 用来变量名来替换seed.js中的host，例如g_config.assetsServer
• version {String} 包版本
• group {String} KISSY combo分组，默认是tm
• feDependencies {Object} 前端模块（femodule）依赖
• useRequireAsync {Boolean} 是否生成异步依赖到requires_async，默认为false
• kissyConfig {Object} KISSY.config配置项
• ignore {Array} 依赖解析时忽略的模式，可选值有：KISSY14、KISSY5和CJS
• useCache: {Boolean} 生成seed自动merge上一次seed生成的结果，默认为false
• useMuiCache: {Boolean} 缓存feDependencies生成的seed，默认为false
• concurent: {Number} 拉取mui seed文件并发数
• timeInterval: {Number} 拉取mui seed批次间隙
• wrapAMDWhenNoExports: {Boolean} 是否在无module.exports时包裹define，默认为true
• exports: {Array} 要对外暴露的文件路径列表, 默认是["*"], 例如['src/index.js']
• useFeDepSeedOnly: {Boolean} 只对配置了的依赖进行seed合并及增加依赖信息
• useDemandDepSeed: {Boolean} 只生成按需使用的seed内容
• ignoreRequires: {Array} 需要ignore的rquire，将不会出现在 module.requires 中

exports 文件

** 如果gulp watch 报错 请先关闭 gulp-cache,具体机制在考虑优化中 **

一个组件对外暴露的文件如果单独引用的价值才有暴露的意义

有时我们的代码会分拆成多个功能文件,但最终只需提供一个index文件对外使用

这时最合理的处理方式将index文件依赖的文件统一打包成一个文件(如xtemplate只需暴露runtime)

功能描述:

0. 将exports的文件所依赖的本地仓库文件打包到exports的文件
1. 去除已打包过的seed多余信息

例子

|- src
  |- fn1.js
  |- fn2.js
  |- util.js

fn1 require fn2,fn2 require util,此时我们只想暴露fn1,fn2

exports配置为["src/fn1.js","src/fn2.js"]

打包完成后对应的暴露的文件只有fn1.js,fn2.js

seed信息为(util已被合并到fn2.js,seed中不再有对应依赖):

{
    fn1:{
        requires:["fn2"]
    }
}

最佳实践:

0. 如果对外暴露的两个文件a,b同时都依赖一个文件c,c就有单独存在的意义,建议也export
1. 如果对外暴露的文件a,异步require一个文件b, b有单独存在的意义,建议也export

• gulp-if
• gulp-cached 文件缓存
• gulp-remember 和gulp-cached配合使用

更多gulp使用手册请参考Gulp.js官方文档。

Test

$ npm run build # build the source code with babel
$ npm run dev # build automatically when files change
$ npm run test # run unit tests

License

The MIT License (MIT)

Copyright (c) 2015 tmallfe

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.