fis3配置(附package.json)

大部分来自    https://github.com/yanhaijing/fis3-base  里的原生配置, 新增部分为舍弃了fis3的component 换为node_modules, 去掉了一些自己不怎么用的功能

// 设置项目属性
fis.set(‘project.name‘, ‘fis3-base‘);
fis.set(‘project.static‘, ‘/static‘);
fis.set(‘project.files‘, [‘*.html‘, ‘map.json‘, ‘/test/*‘]);

// 引入模块化开发插件,设置规范为 commonJs 规范。

fis.hook(‘commonjs‘, {
    baseUrl: ‘./modules‘,
    extList: [‘.js‘, ‘.es‘]
});

// 不使用fis3的component 使用插件fis3-hook-node_modules把插件依赖转为node_modules
fis.unhook(‘components‘)
fis.hook(‘node_modules‘)

fis.match(‘/{node_modules}/**.js‘, {
    isMod: true,
    useSameNameRequire: true
});

/*************************目录规范*****************************/

// 开启同名依赖, 同名模板依赖nui同名js跟css
fis.match(‘/modules/**‘, {
    useSameNameRequire: true
});

// ------ 全局配置
// 允许你在 js 中直接 require css+文件
fis.match(‘*.{js,es}‘, {
    preprocessor: [
        fis.plugin(‘js-require-file‘),
        fis.plugin(‘js-require-css‘, {
            mode: ‘dependency‘
        })
    ]
});

// 配置图片压缩
fis.match(‘**.png‘, {
    optimizer: fis.plugin(‘png-compressor‘, {
        type: ‘pngquant‘
    })
});

// ------ 配置lib
fis.match(‘/lib/**.js‘, {
    release: ‘${project.static}/$&‘
});

// ------ 配置modules
fis.match(‘/modules/(**)‘, {
    release: ‘${project.static}/$1‘
})

// 配置css
//fis.match(/^\/modules\/(.*\.scss)$/i, {
//  parser: fis.plugin(‘sass‘, {
//      include_paths: [‘modules/css‘, ‘components‘] // 加入文件查找目录
//  })
//});
fis.match(/^\/modules\/(.*\.less)$/i, {
    parser: fis.plugin(‘less‘, {
        paths: []
    })
});
fis.match(/^\/modules\/(.*\.(scss|less|css))$/i, {
    rExt: ‘.css‘,
    isMod: true,
    release: ‘${project.static}/$1‘,
    postprocessor: fis.plugin(‘autoprefixer‘, {
        browsers: [‘IE >= 8‘, ‘Chrome >= 30‘, ‘last 2 versions‘] // pc
            // browsers: [‘Android >= 4‘, ‘ChromeAndroid > 1%‘, ‘iOS >= 6‘] // wap
    })
});
fis.match(/^\/modules\/(.*\.(?:png|jpg|gif))$/i, {
    release: ‘${project.static}/$1‘
});

// 配置js
fis.match(/^\/modules\/(.*\.js)$/i, {
    parser: fis.plugin(‘babel-5.x‘),
    rExt: ‘js‘,
    isMod: true,
    release: ‘${project.static}/$1‘
});
fis.match(/^\/modules\/(.*\.js)$/i, {
    isMod: true,
    release: ‘${project.static}/$1‘
});

// ------ 配置前端模版 使用template.js
//fis.match(‘**.tmpl‘, {
//  parser: fis.plugin(‘template‘, {
//      sTag: ‘<#‘,
//      eTag: ‘#>‘,
//      global: ‘template‘
//  }),
//  isJsLike: true,
//  release: false
//});

// ------ 配置模拟数据
fis.match(‘/test/**‘, {
    release: ‘$0‘
});
fis.match(‘/test/server.conf‘, {
    release: ‘/config/server.conf‘
});

/*************************打包规范*****************************/

// 因为是纯前端项目,依赖不能自断被加载进来,所以这里需要借助一个 loader 来完成,
// 注意:与后端结合的项目不需要此插件!!!
fis.match(‘::package‘, {
    // npm install [-g] fis3-postpackager-loader
    // 分析 __RESOURCE_MAP__ 结构,来解决资源加载问题
    postpackager: fis.plugin(‘loader‘, {
        resourceType: ‘commonJs‘,
        useInlineMap: true // 资源映射表内嵌
    })
});

// debug后缀 不会压缩
var map = {
    ‘rd‘: { // 项目发布到指定机器
        host: ‘‘,
        path: ‘‘
    },
    ‘rd-debug‘: { // 查看发布到指定机器的项目的情况(无压缩版本)
        host: ‘‘,
        path: ‘‘
    },
    ‘prod‘: {  // 发布项目
        host: ‘‘,
        path: ‘/${project.name}‘
    },
    ‘prod-debug‘: {  //查看发布项目的情况(无压缩版本)
        host: ‘‘,
        path: ‘‘
    }
};

// 通用 1.替换url前缀 2.添加mr5码 3.打包 4.合图 5.重新定义资源路径
Object.keys(map).forEach(function(v) {
    var o = map[v];
    var domain = o.host + o.path;

    fis.media(v)
        .match(‘**.{es,js}‘, {
            useHash: true,
            domain: domain
        })
        .match(‘**.{scss,less,css}‘, {
            useSprite: true,
            useHash: true,
            domain: domain
        })
        .match(‘::image‘, {
            useHash: true,
            domain: domain
        })
        .match(‘**/(*_{x,y,z}.png)‘, {
            release: ‘/pkg/$1‘
        })
        // 启用打包插件,必须匹配 ::package
        .match(‘::package‘, {
            spriter: fis.plugin(‘csssprites‘, {
                layout: ‘matrix‘,
                // scale: 0.5, // 移动端二倍图用
                margin: ‘10‘
            }),
            postpackager: fis.plugin(‘loader‘, {
                allInOne: true,
            })
        })
        .match(‘/lib/es5-{shim,sham}.js‘, {
            packTo: ‘/pkg/es5-shim.js‘
        })
        .match(‘/components/**.css‘, {
            packTo: ‘/pkg/components.css‘
        })
        .match(‘/components/**.js‘, {
            packTo: ‘/pkg/components.js‘
        })
        .match(‘/modules/**.{scss,less,css}‘, {
            packTo: ‘/pkg/modules.css‘
        })
        .match(‘/modules/css/**.{scss,less,css}‘, {
            packTo: ‘‘
        })
        .match(‘/modules/css/common.scss‘, {
            packTo: ‘/pkg/common.css‘
        })
        .match(‘/modules/**.{es,js}‘, {
            packTo: ‘/pkg/modules.js‘
        })
        .match(‘/modules/app/**.{es,js}‘, {
            packTo: ‘/pkg/aio.js‘
        })
        // 为了上线方便,将静态文件发布到同一个目录
        // .match(‘**/(*.{css,less,scss,es,js,jpg,png,gif})‘, {
        //     release: ‘/prod/$1‘
        // })
});

// 压缩css js html
Object.keys(map)
    .filter(function(v) {
        return v.indexOf(‘debug‘) < 0
    })
    .forEach(function(v) {
        fis.media(v)
            .match(‘**.{es,js}‘, {
                optimizer: fis.plugin(‘uglify-js‘)
            })
            .match(‘**.{scss,less,css}‘, {
                optimizer: fis.plugin(‘clean-css‘, {
                    ‘keepBreaks‘: true //保持一个规则一个换行
                })
            });
    });

// 本地产出发布
fis.media(‘prod‘)
    .match(‘**‘, {
        deploy: [
            fis.plugin(‘skip-packed‘, {
                // 默认被打包了 js 和 css 以及被 css sprite 合并了的图片都会在这过滤掉,
                // 但是如果这些文件满足下面的规则,则依然不过滤
                ignore: []
            }),

            fis.plugin(‘local-deliver‘, {
                to: ‘output‘
            })
        ]
    });

// 发布到指定的机器
//[‘rd‘, ‘rd-debug‘].forEach(function(v) {
//  fis.media(v)
//      .match(‘*‘, {
//          deploy: [
//              fis.plugin(‘skip-packed‘, {
//                  // 默认被打包了 js 和 css 以及被 css sprite 合并了的图片都会在这过滤掉,
//                  // 但是如果这些文件满足下面的规则,则依然不过滤
//                  ignore: []
//              }),
//              fis.plugin(‘http-push‘, {
//                  receiver: ‘xxx/fisreceiver.php‘,
//                  to: ‘xxx/‘ + fis.get(‘project.name‘)
//              })
//          ]
//      });
//});

  

package.json

{
  "name": "",
  "version": "",
  "description": "",
  "repository": {
    "type": "git",
    "url": ""
  },
  "devDependencies": {
    "fis-parser-babel-5.x": "^1.4.0",
    "fis-parser-less": "^0.1.3",
    "fis-parser-template": "^0.3.3",
    "fis-postprocessor-autoprefixer": "0.0.5",
    "fis3-deploy-skip-packed": "0.0.5",
    "fis3-hook-commonjs": "^0.1.26",
    "fis3-hook-node_modules": "^2.2.8",
    "fis3-postpackager-loader": "^2.1.4",
    "fis3-postprocessor-autoprefixer": "^1.0.0",
    "fis3-preprocessor-js-require-css": "^0.1.1",
    "fis3-preprocessor-js-require-file": "^0.1.3"
  }
}

  

时间: 2024-08-02 07:21:33

fis3配置(附package.json)的相关文章

如何编写package.json配置NodeJS项目的模块声明

在NodeJS项目中,用package.json文件来声明项目中使用的模块,这样在新的环境部署时,只要在package.json文件所在的目录执行 npm install 命令即可安装所需要的模块. package.json文件中可配置的项有:名称(name).应用描述(description).版本号(version).应用的配置项(config).作者(author).资源仓库地址(repository).授权方式(licenses).目录(directories).应用入口文件(main)

nw.js node-webkit基本程序结构与配置package.json配置说明

(一)基本程序结构 如上图,是一个nw程序的基本组织结构,在根目录下有package.json(程序的配置文件)和index.html(可以是任意名称,应用的启动页面):js/css/resources分别是应用的样式.脚本.和资源文件(html.图片等):node_modules存放node.js的扩展组件.这只是一个通用的基本组织结构,实际项目的组织结构,不必一定按照此结构进行搭建,如项目使用的是js模块化编程require框架的.最终的组织结构以适应实际项目为准,但文件package.js

es6转码和package.json中的配置

在线实时转换 需要babel-register .babelrc中: { "presets": [ "es2015" ] } 项目中main.js配置: 前提是安装对应的包 require('babel-register') require('./src/app') 自己写的要运行的为app.js,这样配置后会在运行main.js是自动转为es5并执行 通过配置手动转换 需要babel-cli 安装babel后 运行babel src -d dist src为自己写

angular - 配置package.json -3

package.json 包含了所有的开发包以及全局包以及其它项目信息,我们这个项目需要用到 bootstrap,所以我们添加信息. 添加包信息以后,我们用 npm install 安装,npm包管理工具会根据package.json提供的信息进入安装包 原文地址:https://www.cnblogs.com/cisum/p/9096890.html

Package.json详解

引言 前端需要学习的东西真的挺多的,之前主要从事的是MVC框架,操作DOM,使用JQUERY比较多,不知到什么时候,发现现在前端MVVM是主流,不得不把之前的大部分东西丢掉,作为前端婴儿不断前行. 所以以后的文章,可能开始都比较基础,希望大拿不要见笑,若有不对的地方,希望指正,我也会不断修正迭代. 在学习MVVM(react和vue)的时候,开始就是会找iview,element,ant-pro等现成的东西,去改.CLI直接安装,也没有想去学习webpack.现在看更早一点的自己,真的是傻的可爱

npm package.json属性详解

章节目录 概述 name version description keywords homepage bugs license 和用户相关的属性: author, contributors files main bin man directories directories.lib directories.bin directories.man directories.doc directories.example repository scripts config dependencies U

怎样通过已经使用过webpack+vue+vueRouter+vuecli的配置文件package.json创建一个项目

首先,我们自己得手动创建一个webpack+vue+vueRouter+vuecli工程,执行下面:如:新建一个vue项目,创建一个基于"webpack"的项目,项目名为vuedemo: $ vue init webpack vuedemo 安装完成后进入工程名称再根据原来项目的配置文件初始化 $ cd vuedemo $ npm install 但是由于在新建的时候对eslint的选择中选择了Yes,所以后面根据配置package.json的时候,发现没有eslint-friendl

NodeJS中 package.json 解析

package.json 中包含各种所需模块以及项目的配置信息(名称.版本.许可证等)meta 信息. 包含可配置项 name 名称 应用描述 description 版本号 version 应用的配置项 config 作者 author 资源仓库地址 respository 授权方式 licenses 目录 directories 应用入口文件 main 命令行文件 bin 项目应用运行依赖模块 dependencies 项目应用开发环境依赖 devDependencies 运行引擎 engi

package.json(1)

借此篇文章回顾一下package.json里面的配置和相关文件,依赖需求的位置. 对package.json的理解和学习 一.初步理解 1. npm安装package.json时  直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可,自动将package.json中的模块安装到node-modules文件夹下 2. package.json 中添加中文注释会编译出错 3. 每个项目的根目录下面,一般都有一个package.json文件,定义