zoukankan      html  css  js  c++  java
  • FIS

    学习官网
     
    1. fis release: 编译并发布
        fis release -m: md5加密
        fis release -o : 内容压缩
        fis release -p : 文件打包合并
        
        可连写:fis release -mop
     
    2.fis release -w 文件监听
     
     
    3.fis-conf.js:
     
     1 // 设置图片合并的最小间隔
     2 fis.config.set('settings.spriter.csssprites.margin', 20);
     3 // 取消下面的注释开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple
     4 fis.config.set('modules.postpackager', 'simple');
     5 // 取消下面的注释设置打包规则
     6 fis.config.set('pack', {
     7     '/pkg/lib.js': [
     8         'js/lib/jquery.js',
     9         'js/lib/underscore.js',
    10         'js/lib/backbone.js',
    11         'js/lib/backbone.localStorage.js',
    12     ],
    13     // 取消下面的注释设置CSS打包规则,CSS打包的同时会进行图片合并
    14     '/pkg/aio.css': '**.css'
    15 });
    16 // 取消下面的注释可以开启simple对零散资源的自动合并
    17 // fis.config.set('settings.postpackager.simple.autoCombine', true);
     
    3.MD5压缩合并发布到src同级本地目录
        fis release -mop -d ../output
     
    4.seajs 压缩config处理(这是我自己写的,想config文件里的别名追加时间戳,希望能有更好的办法)
     
     
     
     
    -------------------------------------升级至fis3--------------------------------------------
     
     
    /****************************************************************************************
     * 1.压缩js
     */
    var jsFiles = '{/script/*,/script/*/*,/library/*,/library/*/*,/dist/template}.js';
    fis.match(jsFiles, {
        // fis-optimizer-uglify-js 插件进行压缩,已内置
        optimizer: fis.plugin('uglify-js')
    });
    
    /****************************************************************************************
     * 2.压缩css
     */
    fis.match('*.css', {
        // fis-optimizer-clean-css 插件进行压缩,已内置
        optimizer: fis.plugin('clean-css')
    });
    /****************************************************************************************
     * 3.合并资源
     */
    var commonJs = '/script/common/*.js';
    var bundleJs = '{/library/*/*,/script/service/*,/dist/template}.js';
    
    //合并css
    fis.match('/dist/style.css', {
        packTo: '/dist/style.css'
    });
    fis.match('/script/library/swiper/swiper-3.3.1.min.css',{
      packTo:'/dist/swiper.css'
    })
    
    //合并js
    fis.match(commonJs, {
        packTo: '/dist/common.js'
    });
    fis.match(bundleJs, {
        packTo: '/dist/bundle.js'
    });
    
    /****************************************************************************************
     * 4.对合并CSS进行图片合并
     */
    fis.match('::package', {// 启用 fis-spriter-csssprites 插件
        spriter: fis.plugin('csssprites')
    })
    
    fis.config.set('settings.spriter.csssprites', {
        //图之间的边距
        margin: 2,
        //使用矩阵排列方式,默认为线性`linear`
        layout: 'matrix'
    });
    
    fis.match('/dist/style.css', {
        // 给匹配到的文件分配属性 `useSprite`
        useSprite: true
    });
    
    fis.match('::packager', {
        postpackager: fis.plugin('loader')
    });
    
    /****************************************************************************************
     * 5.合并资源加时间戳
     */
    
    fis.match('/dist/*.css', {// css加md5
        useHash: true
    });
    fis.match('/dist/*.js', {// js加md5
        useHash: true
    });
    fis.match('*.png', {// png加md5
        useHash: true
    });
    fis.match('*.jpg', {// png加md5
        useHash: true
    });
    
    
    /****************************************************************************************
     * 6.忽略打包无用文件
     */
    fis.set('project.ignore', [
      'page/**',
      'tpl/**',
      'script/**',
      'style/**',
      '/*.js',
      '/*.json',
      '/*.txt',
      'node_modules/**',
      '.git/**',
      '.svn/**'
    ]);

    另:

      忽略页面js,防止沉底-->script后加(不能有空格)

    <!--ignore-->
     
  • 相关阅读:
    mvc实例
    mvc
    设计模式总结
    作业——《XXX》系统设计时所实现的质量属性战术
    实训第十四天
    实训第十三天
    实训第十二天
    实训第十一天
    实训第十天
    实训第九天
  • 原文地址:https://www.cnblogs.com/jyjin/p/4710257.html
Copyright © 2011-2022 走看看