fex-team / fis3 Goto Github PK

当前 media 环境下面设置有 project.files 列表时，走 fis.project.getSourceByPatterns，然而在该方法中也就是project。js的68行处，未加针对ignore是否存在的报错，如果ignore被删除会导致map方法报错。

折腾了几天，感觉新版本并不适合现在的项目，打算再恢复到老版fis，不知道以后会对老版本fis的支持如何？

在fis中release的时候会自动生成一个map.json,fis3需要在一个文件(我命名的是manifest.json)中写个RESOURCE_MAP才能生成清单。
如果我不想在项目下建manifest.json文件,但是想让产出的时候在项目下生成manifest.json文件,应该怎么写插件可以实现？

http://fex-team.github.io/fis3/docs/api/config-props.html

启用 lint 插件进行代码检查

fis.match('*.js', {
    paser: fis.plugin('js', { // 这里是 lint 吧~~
    })
})

现在情况是 project/less/*.less 下的文件 a.less,b.less 要放到 /publish/css/a.css, /publish/css/b.css
该如何写呢？

我只想监控 project/less/*.less 不想写成 match('*.less', x)

其实这个 $0 ，应该有自定义拆分的需求吧，路径/文件名/扩展名 不知道如何拆开

前提：配置规则定义好后，其中并没有useHash:true的配置
当执行命令：fis3 release prod之后，所有静态文件包括图片都被自动添加了指纹，需要在prod模式中添加useHash:false，才能不添加指纹
这个功能是因为指定了media自动添加吗，是不是可以去掉呢

html useCache默认开启的话，会导致里面的js修改时html不会自动更新，使用时容易引起困惑

与js文件同名的css自动添加到依赖的功能是不是去掉了？

fis 中

在模板模块中以及 JS 模块中对应同名的 CSS 模块会自动与模板模块、JS 模块添加依赖关系，进行加载管理，用户不需要显示进行调用加载。

现在在 fis3 中没有生效。

fis3如何修改html中的src 、 href的路径值

at Function._.query (/Users/apple/.nvm/versions/node/v0.12.0/lib/node_modules/fis3/lib/util.js:870:16);

pos = rest.indexOf('#'); // 这

fis3/lib/file.js

defineLikes

set: (function(prop) {
  return function(val) {
    if (val === false) {
      this._likes[v] = false; // v应该为prop
      return;
    }
    var that = this;
    likes.forEach(function(v) {
      if (prop === v) {
        that._likes[v] = true
      } else {
        that._likes[v] = false;
      }
    });
  }
})(v)

用例

test/config.js，会抛出 TypeError: Cannot read property '0' of null，问题定位在defineLiks()中

fis.match('!**/js.js', {
      release: '/static/$&',
      useHash: true,
      useDomain: true
    });
path = __dirname+'/file/ext/modular/js.less?__inline';
    var f = _.wrap(path);
    var url = f.getUrl();
    expect(url).to.equal('www.baidu.com/static/file/ext/modular/js_'+ f.getHash() +'.less?__inline');

1 deploy 的问题，还是很奇怪哦。

fis
.media('dev')
.match('{css/*.css,less/g.less,js/*.js,html/*.html,img/**}', {
  deploy: fis.plugin('local-deliver', {
    to: './publish'
  })
})

fis
.media('test')
.match('publish/**', {
  deploy: fis.plugin('http-push', {
    receiver: 'xx/receiver2.php',
    to: '/data/wapstatic/monkeytao/now'
  })
})

这样就是正常的 如果去掉 .media('dev')就不一样了
我的理解是默认也就是dev是忽略 test下的规则的
test的时候读取了 dev的规则，但是我的test规则是所有文件呀，好象没有覆盖

2 还有如何设置为相对路径呢？我用的是 match('*') domain:'..'的方法，还有更靠谱的吗？
3 为啥我的 design slice 等文件夹默认是忽略的不会被 deploy到 ./publish 中，但是神奇的是
publish 文件夹和 一个叫 save 的文件夹却被发布到 ./publish中了。。。！！！这太神奇了
现在的解决方法是

fis.set('project.ignore', [
  // 'node_modules/**/*',
  // 'ignore/**/*',
  'publish/**/*',
  'save/**/*',
  // '.git/**/*',
  // '**/prepros.cfg',
  'fis-conf.js'
])

这里为啥又可以只写 save/** 而不是 save/**/*

<link rel="import" href="test.tpl?__inline"/>

// test.tpl
<p>test</p>

fis.match('*.tpl', {
    release: false,
    isHtmlLike: true
});

错误信息

[ERROR] unreleasable file [/Users/hanai/WebstormProjects/fis3-demo/use-amd/test.tpl]

文件中记录为"::image"匹配，实际使用中却是"image"才匹配的到
想到image产出到新的目录中，如下配置时：
//图片处理
fis.media("prod").match("image", {
useHash: false,
release: '/prod/images/$0'
});
图片产出后，竟然只剩下三个文件.gif，.png，.jpg，没有名字了，求教正确的配置应该是怎样的呢

之前release之后会有一个map.json,fis3怎么配置才会产出那个清单文件？

场景：
有项目 path/to/a path/to/b path/to/c path/to/d 等，我们现在是gruntfile.js方案，
使用方式是 cmd 开多个路径，然后执行 grunt 。
有同学的mac机器上经常出现端口占用的报错(配置里面每个都手动填了不同端口的，我的机器没遇到过)。

正巧 fis3 出来，我想要切换过来，所以有了这个想法：
如果我多个项目(都有 fis-config.js) ，如何能共用一个 watch / livereload / cmd 等进程 & 端口
简单说就是如何单一入口管理他们，
不光是为了避免冲突，
同时会切换几个项目的需求是有的。
【发现用 prepros.io 这个gui 工具就可以很好的同时管理多个项目，他只是没有自动雪碧图。】

• deploy 的调整再做下讨论
• deploy 优化
• package 这块的设置还是有点别扭，需要做修正
• 层叠规则，debug 优化
• 官网确稿
• 培训PPT
  • 移动云培训
• 发布相关事宜
• 调整 map.json 的产出
• fis3 内核只解决依赖问题，而不绑定 AMD 、CommonJS 等规范
• hook 插件名字是否改一下
• hook 插件的开发文档、事件等
• 自动打包支持
• 优质的错误提示
• 关于插件累加问题
• 模板内嵌的 JavaScript，CSS 等不要处理了，处理了黑盒太严重
• 优化点 fis-conf.js 报错立马终止编译
• !important 规则导致规则混乱 Bug
• 解决 watch fis-conf.js 修改无效的 bug.
• 解决并行编译导致 -c 清理掉不是本项目缓存的问题
• fis3-demo 一例胜过千言

未来

• 国际化，让更多人参与进来

fis.match('/1.0.0/{dir1/*,dir2/*,*}.css', {
   packTo: '/pkg/1.0.0.css'
});

打包之后文件顺序不是我想要的，能自定义打包顺序不能？

我弄了两个medianame: local, dev
结果执行的时候

fis3 release local -c

结果正常，
而

fis3 release -c local

结果变成了执行的meida dev里的内容。

比如我html里面有10个script标签，每个一行，当我release过后，这10个script标签成了10个空行，然后下面才是script标签，虽然空行并不会有太大影响，但是强迫症……，哈哈

我已在#73 pattern = pattern.substring(1);后添加ret = glob.sync('**', opts);解决问题，请知晓~，可能造成性能浪费，若有时间可处理这块，请知晓~

exports.getSourceByPatterns = function(patterns, opts) {
  patterns = patterns || fis.env().get('project.files');
  if (!Array.isArray(patterns)) {
    patterns = [patterns];
  }
  opts = _.assign({
    cwd: exports.getProjectPath(),
    matchBase: true,
    ignore: fis.env().get('project.ignore')
  }, opts || {});
  opts.nodir = true;
  opts.sync = true;
  var ret = [];
  var source = {};
  patterns.forEach(function(pattern) {
    var exclude = pattern.substring(0, 1) === '!';
    if (exclude) {
      pattern = pattern.substring(1);
      ret = glob.sync('**', opts);// 此处为添加 的代码
    }
    var mathes = glob.sync(pattern, opts);
    ret = _[exclude ? 'difference' : 'union'](ret, mathes);
  });
  ret.forEach(function(file) {
    file = fis.file(opts.cwd, file);
    if (file.release) {
      source[file.subpath] = file;
    }
  });
  return source;
};

看示例的时候有 '*.html' 的，也有 '**.html'的还有 'xxx/**/*.html'的，它们有什么区别啊？

使用 fis-parser-sass 编译CSS文件，配置如下：
fis.match('*.scss', {
optimizer: fis.plugin('fis-parser-sass')
});

打包输出时报错：

[ERROR] unable to load plugin [fis3-optimizer-fis-parser-sass] or [fis-optimizer-fis-parser-sass]

请问怎么去掉默认追加的 FIS3-optimizer 前缀？是配置方式不对？还是说其他什么原因呢？

因为media会更改NODE_ENV的值 😂

var nsConnector = config.get('name spaceConnector', ':');

如果这个有了，我感觉会java开发者，会疯狂到爆。。。

见test/file.js #319行

     fis.match('**', {
      domain: 'www.baidu.com',
      useDomain: true
    });
    path = __dirname+'/file/ext/modular/js.js?__inline';
    f = _.wrap(path);
    url = f.getUrl();
    expect(url).to.equal('www.baidu.com/file/ext/modular/js.js?__inline');
    // 预期："www.baidu.com/file/ext/modular/js.js?__inline"
    // 实际："www.baidu.com/file/ext/modular/js_1f8fb39.js?__inline"

// fis-conf.js

fis.hook('module', {
    mode: 'amd'
});

// account.js 源码

/**
 * @require account.css
 */
var reg = require('./reg/reg.js');
var login = require('./login/login.js');

// account.js release之后

define('work/account:1.0.0', function(require, exports, module) {
/**
 * @require work/account:1.0.0.css
 */
var reg = require('work/account:1.0.0/reg');
var login = require('work/account:1.0.0/login');
});

不是mode设置成amd之后 会自动shim包裹么？

1 为何 publish 多出了 asset[雪碧图源文件] 目录的问题：

fis.set('project.ignore', [
  // 'node_modules/**',
  // '.git/**',
  'asset/**',
  // 。。。
])

设置忽略是没用的

// fis.match('*', {
fis.match('{less/**,html/**,img/**,js/**,map.json}', {

或者

fis.match('!/asset/**', {
  deploy: ...
})

成功屏蔽 asset 文件夹

2 基于以上情况，执行 fis3 release -wL 报错，根据提示加入了 fis.config.set("project.watch.usePolling", true)
结果一直运行下去没有停下来

尝试过注释很多功能都不行。

3 对于 根据 **@2x.png 生成2倍图的问题，好像只能生成一个雪碧图。。。还是要自己尝试去写插件

mod模式下，怎么设置生成的mod文件是相对路径？

我不想模板文件*.tpl输出到output目录中，结果报下面的错误
[ERROR] unreleasable file
我的相关配置：

fis.match('**.tpl', {
    parser: fis.plugin('utc'), // invoke `fis-parser-utc`,
    isJsLike: true,
    isMod:false //避免被当作组件包装
});

http://fis.baidu.com/docs/dev/solution.html

见 test/config.js

fis.util.glob('*.JS', 'a/b.js')这类匹配失败

index.tpl
内有一script标签
src="js/product.js"

构建后 期望为
src="js/product_MD5.js“

看文档是只对.html内的资源文件进行定位和替换
请问如何设置.tpl文件也应用此规则？

配置文件我是这么写的

fis.set('project.ignore', [
  'node_modules/**', 'output/**', 'fis-conf.js',
  'conf/**',
  'inc/**',
  'setting/**'
])

fis
  .media('production')
  .match('*.js', {
    useHash:true,
    optimizer: fis.plugin('uglify-js')
  })

额，还是我。。。- -
之前用 grunt 我们所有 img 和 slice 分别放了 普通图片和雪碧图，

fis.match('less/(*.less)', {
  parser: fis.plugin('less-2.x'),
  rExt: '.css',
  release: 'css/$1',
})
fis.match('publish/css/*.css', {
  optimizer: fis.plugin('clean-css', {}),
  useSprite: true,
})
fis.match('::package', {
  spriter: fis.plugin('csssprites')
})
// publish/css/x.css 正常包含了：
background-image: url("../slice/x.png?__sprite");

但是图不知道在哪里，

直接手写 /css/g.css/ 生成 /publish/css/g.css
做的小测试里面是在 css/x.css 下有个 x_z.png
x_z.png 路径或者名字不能配置？好奇怪的名字啊。。。

这可能又是一个 先 less 转换，再生成雪碧图的问题。

//test.js

//release前
var $ = require('$');
//...

//release后
define('test', ['$'], function(require, exports, module){ 
    var $ = require('$');
});

我想实现这样的构建效果, 之前是修改的jswrapper,现在应该怎么设置？

快速开始

• 介绍
• 安装

  • 安装命令

    简单科普一下 -g 的含义，镜像使用等注意事项

  • 版本查看

    fis -v

  • 升级命令

    npm update -g fis

  • sudo问题

• 构建

  • demo

    极简的示例，一个html + 一个css + 一个js + 3个png图片

  • 命令

    fis release -d xxx，先教给用户接受 -d 参数

  • 资源定位

    引导用户查看构建后的url路径变化，引出fis的 资源定位 功能说明

  • 配置文件

    引导用户建立 fis-conf.js 配置，使用match参数修改发布路径，再次查看路径

  • 文件指纹

    顺势介绍 -m 构建参数，印证资源定位的作用，文件指纹概念让用户参考 这里

  • 压缩资源

    启用 -o 参数，展示js、css、图片 压缩功能

  • csssprites

    给3个png图片添加 ?__sprite 标识，启用 -p 参数，介绍自动csssprites

  • 参数组合

    组合 -omp 介绍组合写法

• 调试

  • 目录

    fis server open，先让用户知道我们有一个临时目录

  • 发布

    fis release，告诉用户，缺省 -d 参数默认发布到上述目录中

  • 启动

    fis server start

  • 浏览

    http://127.0.0.1:8080/

  • 文件监听

    fis release -w

  • 自动刷新

    fis release -wL

  • 替代

    告诉用户，如果有自己的server，fis release -wLd <服务器目录> 是一样的

内置语法

• 介绍

• 资源定位

  从上一节的构建 -m 参数说起，介绍资源定位、md5、query、domain、url属性等内容

• 内容嵌入

  列一个table，介绍一下各种内容嵌入的关系

• 依赖声明

  介绍资源表，以及三种语言中的声明标识

工作原理

用最精致的代码解释fis的工作原理

fis以文件对象为中心，固化构建流程，使得开发者可以面向开发规范进行构建配置，而不是面向流程进行进行配置，这是fis与其他构建工具最大的区别。fis内置的构建流程可以抽象为以下逻辑：

• 整体流程：

  /**
   * 核心构建流程
   * @param opt{Object} 命令行参数
   */
  fis.release = function(opt){
      // 读取所有源码文件
      var files = fis.find(fis.project.root);
  
      // 单文件构建阶段
      files.forEach(function(path, index){
          var file = fis.file(path);            // 创建文件对象
          if(file._cache.isExpired()){           // 检查构建缓存
              fis.compile(file, opt);           // 同步构建
              file._cache.save();                // 建立缓存
          } else {
              file._cache.revert();              // 从缓存读取内容
          }
          files[index] = file;
      });
  
      // 多文件批量处理阶段
      fis.plugin('prepackage', files, opt);     // 预打包
      fis.plugin('package', files, opt);        // 打包
      fis.plugin('sprite', files, opt);         // sprite
      fis.plugin('postpackage', file, opt);     // 后打包
  
      // 发布阶段
      fis.deploy(file);
  };

• 单文件构建逻辑

  /**
   * 单文件构建逻辑
   * @param file{FISFile} fis文件对象
   * @param opt{Object} 命令行参数
   */
  fis.compile = function(file, opt){
      if(opt.lint && file.lint){              // 命令行参数控制是否开启校验处理
          file.lint(file);
      }
      if(file.parser){                        // 非标准语言转为标准语言
          file.parser(file);
      }
      if(file.preprocessor){                  // 预处理
          file.preprocessor(file);
      }
      if(file.standard){                      // 内置语法处理，可关闭
          file.standard(file);
      }
      if(file.postprocessor){                 // 后处理
          file.postprocessor(file);
      }
      if(opt.optimize && file.optimizer){     // 命令行参数控制是否开启压缩处理
          file.optimizer(file);
      }
  }

• fis的文件对象

  var path = require('path');
  fis.file = function(path){
      var file = path.parse(path);            // 基本文件属性
      var rules = fis.getRules(path);         // 根据文件路径获取fis.match配置的规则
      rules.forEach(function(rule){
          merge(file, rule);                  // 把命中的规则属性配置合并到文件对象上
      });
      file._cache = new fis.Cache(path);      // 缓存对象
      return file;
  }

初级使用

• 给一个demo
• 安装一个以页面为单位的打包插件
• 安装一个预处理插件
• 简单配置合并
• 调试、构建、预览、优化、发布

中级使用

• 编写单文件编译配置，比如预处理（这里采用本地安装外部依赖的方式）
• 编写打包逻辑
• 发布一个插件

高级使用

• 包装
• 方案介绍
• 自定义解决方案

抱歉又遇到新的问题：

fis.media('test')
.match('{css/*.css,less/g.less,js/*.js,html/*html,img/**}', {
  deploy: fis.plugin('http-push', {
    receiver: 'somedomain.com/receiver/receiver.php',
    to: '/path/to/project'
  })
})

服务器端的 receiver.php 好像是不是 fis3 的，而是fis之前的版本里用的，这个我没法拿到代码

出现的问题是 html目录下的 index.html 变成了 index.html/ 文件夹
还出现了 index2.htmlindex3.html 这种文件名 ...

我在a.scss文件中 import _iconfont.css，_iconfont 文件中包含字体url，生成的a.css文件中的字体url错误。

a.scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
@import "font/_iconfont.css";

body {
  font: 100% $font-stack;
  color: $primary-color;
}

.inline-demo {
  background: url('./a.png?__inline');
}

font/_iconfont.css

@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

编译后

a.css

@font-face {
  font-family: "iconfont";
  src: url(0);                                   <----- 错误
  /* IE9*/
  src: url(0) format('embedded-opentype'), url(0) format('woff'), url(0) format('truetype'), url(0) format('svg');
  /* iOS 4.1- */ }

body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

.inline-demo {
  background: url('data:image/png;base64,isfsdgsdfsdh'); }

_iconfont.css

@font-face {font-family: "iconfont";
  src: url('/font/iconfont.eot'); /* IE9*/
  src: url('/font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/font/iconfont.woff') format('woff'), /* chrome、firefox */
  url('/font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('/font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

目录结构

我在用fis做二次开发，看你们fis3出来了，打算直接升级到fis3去做，不知道目前fis3算是稳定版本吗