Code Monkey home page Code Monkey logo

fepack's Introduction

fepack

Version

fepack是面向前端的工程构建工具。解决前端工程中资源加载、模块化开发、自动化工具、代码部署等问题。

1、安装全局依赖
npm install -g typescript
gem install compass

2、安装fepack
npm install -g fepack

例子

mkdir my-proj
cd my-proj

fepack init // 生成fepack.json,配置看后文介绍
fepack release dev
fepack server start

在浏览器中打开127.0.0.1:8080

支持功能

  1. 语法增强,支持

    (typescript,es6,coffee) => es5
    sass => css
    (jade,md) => html
    jsx => js
    
  2. 静态资源加版本号(支持.html inline模式 <script src="a.js" inline></script>, <link href="a.css" inline>

  3. 文件压缩

  4. 源文件常量注入

  5. 文件大小检测,主要是图片文件,默认大于200k报警

  6. 增加velocity模板语法支持,用法

  7. 支持jade文件mock,默认会去根目录mock目录下查找路径相同的js文件,比如 mock/index.data.js

模块加载

fepack支持browserify式的模块加载

// require业务js文件
let head = require('./head.js')

// require 4种格式模板文件
let headTemplate = require('./head.tpl')
require('./head.html')
require('./head.jade')
require('./head.md')

// require css
// index.css内容会被以style tag方式插入到head里
// cssModule代表生成的style tag
let cssModule = require('./index.css')

// require npm安装的node包(不支持依赖native环境的包)
// 在项目根目录npm install --save cookie
let cookie = require('cookie')

fepack.json

{
    "server": {

        //server监听的端口
        "port": 8080    
    },
    "release": {

        //项目名,会加到被引用的资源前
        "project": "",  

        //域名,会加到被引用的资源前
        "domain": "//s1.mljr.com",

        //是否开启coffee编译
        "coffee": "false", //默认不开启(如果开启,需要提前全局安装coffeescript, npm install -g coffee-script)

        //编译实例
        "cases": {
            "dev": {
                "optimize": false,
                "version": true,
                "watch": true,

                //常量注入
                //js里使用:let a = "@{FEPACK.aa}" => let a = "aaaa"
                //jade里使用: #{FEPACK.aa}
                "env": {    
                    "aa": "aaaa",
                    "bb": "bbbb",
                    "a": "cc"
                }
            },
            "qa": {
                //是否压缩,默认false
                "optimize": true,

                //是否加版本号,默认false
                "version": true,

                //是否watch,默认false  
                "watch": false,

                //是否启用域名,默认false  
                "domain": true,

                //覆盖全局的domain
                "reDomain": "//s2.mljr.com",

                 //指定编译结果目录,
                 //默认为/Users/${user}/.fedog-tmp/www
                "www": "../www",
                
                //如果指定为ture,则保留page目录下的jade文件不编译,主要用来发布时server端使用,并且会�强制开启optimize
                "jadeKeep" : false
            }
        },

        // 设置文件原样复制,中间不做任何处理
        "copy": [
            "**/*.min.js",
            "static/script/copy/**/*"
        ],

        // 设置文件忽略
        "ignore": [
            "static/script/ignore/**/*",
            "fepack.json"
        ],

        // 设置全局模块引用
        "externals": {
            "jquery": "window.$"
        },

        // 设置postcss配置
        "postcss": {
            "autoprefixer": {"browsers": ["last 2 versions", "iOS 7", "Android 4.4", "> 5%"]},
            "pxtorem": {
                "root_value": 40,
                "prop_white_list": []
            }
        }
    }
}

fepack's People

Contributors

bravf avatar illvili avatar

Watchers

James Cloos avatar Tobie avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.