GithubHelp home page GithubHelp logo

spmx's Introduction

开发seajs项目的超级利器!

闲着无聊,写了一个支持seajs模块化项目的构建工具(前端集成解决方案),具有以下功能:

  • seajs 作为模块化框架
  • 所有静态资源自动加 md5版本戳,seajs均可加载定位
  • 支持给所有静态资源添加域名前缀,seajs加载毫无压力
  • 非常易用的自动 csssprites
  • 自动jshint校验js、coffee文件,校验结果为 中文 显示
  • js、css压缩,压缩时保留require关键字,使得seajs运行正常
  • png图片压缩,支持 将png24压缩为png8
  • 内置本地开发调试服务器,支持运行 jspphp
  • 支持使用 lesscoffeescript 开发项目
  • 支持将underscore模板编译成 js模板函数 直接嵌入到js或coffee文件中使用
  • 支持define自动包装,写seajs组件如同写nodejs一样舒爽
  • 支持文件监听,保存即发布
  • 支持浏览器自动刷新,保存即刷新
  • 可以上传到远端服务器,保存即增量编译上传
  • 超低学习成本,只须记忆 3 条命令即可完成开发
  • 抹平编码差异,开发中无论是gbk、gb2312、utf8、utf8-bom等编码的文件,输出时都能统一指定为utf8无bom(默认)或者gbk文件
  • 跨平台支持win、mac、linux等系统

详细用法

安装

npm install -g spmx

非win系统最好将npm的包安装在用户目录下,尽量避免使用 sudo 来安装。修改npm install -g安装目录的方法为:

# 设置global路径为用户目录
npm config set prefix ~/npm
# 将~/npm/bin路径加到PATH变量中
echo -e '\nexport PATH=~/npm/bin:$PATH' >> ~/.bashrc
# 重新载入.bashrc
source ~/.bashrc
# 安装spmx
npm install -g spmx

安装成功后执行 spmx -h 即可看到相关开发命令帮助

获得一个todo样例项目

# 使用spmx的install命令来获取开发资源
spmx install seajs-todo-demo

在当前目录下即可看到令人期待的seajs模块化项目啦!

如果你执行 spmx install seajs-todo-demo 命令没成功,可以git clone 这个项目: seajs-todo-demo

让代码跑起来!

首先,启动内置的调试服务器:

spmx server start

此时spmx会启动一个精巧的jetty服务器,并且打开浏览器访问了 http://127.0.0.1:8080 ,现在这个调试环境什么也没有,接下来,我们在命令行下cd到我们下载的样例项目中:

cd todo-demo

第三步,执行spmx的编译命令:

spmx release

第四步,刷新浏览器,查看我们的项目。

各种功能体验

  1. 给所有资源加 md5版本戳,执行:

    spmx release -m

    然后刷新浏览器,看一下源码吧!

  2. 压缩js、css、图片,执行:

    spmx release -o
  3. 校验js,执行:

    spmx release -l
  4. 自动csssprite,执行:

    spmx release -p

    可以看到 #todo-list label 的图片都自动合并了哦

  5. 所有静态资源加域名,先修改fis-conf.js文件,去除掉 第2行 的注释,然后执行:

    spmx release -D
  6. 文件监听,执行:

    spmx release -w

    命令行窗口不要关闭,然后去修改源码->保存->刷新浏览器,就能看到更新的效果。

  7. 文件上传,执行:

    spmx release -d remote

    就可以发布到我的一个小服务器上,然后浏览器访问: http://vm-1.chongzi.kd.io/

  8. 加域名、压缩、加md5戳、校验、csssprite、把编译好的文件产出到output目录中(其实就是随意组合使用前面提到面的参数啦):

    spmx release -Domlp -d ../output
  9. 文件监听、启动live-reload服务器、同时发布到本地调试目录、outpu目录和远端服务器:

    spmx release -wLd preview,remote,../output

    使用自动刷新功能需要添加 live-reload 浏览器插件,请google之,我没做可以自动添加脚本的功能,因为懒。。。

目录规范

任何 目录规范部署规范编译规范 都是可配置的,不过略微麻烦一些,有兴趣的同学可以在issues里留言,这里只介绍内置的规范。

内置的规范包括:

  1. .less 后缀的文件是less文件,编译后得到css文件。
  2. .minix.less 后缀的文件定义less的minix,编译后不会产出。
  3. .coffee 后缀的文件是coffee-script,编译后得到js文件。
  4. .tmpl 后缀的文件是underscore前端模板,左右定界符为 <%%>,编译后不会产出。在js或coffee中使用 __inline('path') 函数将其嵌入到js或coffee文件中作为模板函数使用。
  5. 扔在 sea-modules 目录下的js、css、less、coffee文件都是模块化文件,会自动包装define,自己就不要写了。使用seajs.use或者require加载模块的时候id与文件的对应规则是这样的:
文件 引用id 举个例子
/sea-modules/a.js a seajs.use('a');
/sea-modules/b/b.js b seajs.use('b');
/sea-modules/b/c.js b/c seajs.use('b/c');
1. 扔在 ``lib`` 目录下的文件不被认为是模块化的,请直接在页面上使用script或link标签引用。

如果使用中遇到什么觉得诡异的地方,欢迎issues留言

spmx's People

Contributors

fouber avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

spmx's Issues

目录结构

你好:
请问用spmx的时候只能按照你们的目录结构吗?
有没有什么可以配置的文件?
谢谢!

spmx 支持seajs异步加载模式么?

require.async('./a', function(a) {
……
});

其中 './a' 是一个JS变量,建议这种的,加一个map,编译前的文件名(带目录),编译后的文件名,这样就可以对应起来了

提问spmx启动问题

localhost:~ $ spmx server start --no-rewrite

error: unknown option `--no-rewrite'

请问 我这个又不是php 这个到底是什么原理?

关于 Node 安装路径

还没大量使用 SeaJS, 歪楼..

README 里说非 Windows 用户最好把 Node 安装在用户目录,
可 Linux 下默认是 /usr/bin/ /usr/local/bin/,
记得推荐用法是编译安装到 /usr/local/bin/ 并设置 /usr/local/ 权限为当前用户,
Mac 下 brew 安装一般在 /usr/local/bin/, 这不需要 sudo 权限.

觉得方案略奇怪... 有其他原因吗?


再问下 jetty 是从哪儿跑的?

怎样更改sea-modules里面的路径

fis.config.set('roadmap.path', [
{
reg: /(sea-modules)(.*)/i,
release: '$1/$2',
url: '/italy/$1/$2'
}
]);
就像这样,请问怎样把模块url都加上前缀italy?
谢谢

作者好,mac下安装貌视有问题

localhost:~ lincong$ sudo npm install spmx -g
npm http GET http://registry.cnpmjs.org/spmx
npm http 200 http://registry.cnpmjs.org/spmx
npm http GET http://registry.cnpmjs.org/spmx/download/spmx-0.0.6.tgz
npm http 200 http://registry.cnpmjs.org/spmx/download/spmx-0.0.6.tgz
npm http GET http://registry.cnpmjs.org/fis/1.4.17

npm http GET http://registry.cnpmjs.org/tinycolor
npm http GET http://registry.cnpmjs.org/commander
npm http GET http://registry.cnpmjs.org/options
npm http 304 http://registry.cnpmjs.org/commander
npm http 304 http://registry.cnpmjs.org/options
npm http 200 http://registry.cnpmjs.org/tinycolor
npm http GET http://registry.cnpmjs.org/tinycolor/download/tinycolor-0.0.1.tgz
npm http GET http://registry.cnpmjs.org/commander/download/commander-0.6.1.tgz
npm http 200 http://registry.cnpmjs.org/commander/download/commander-0.6.1.tgz
npm http 200 http://registry.cnpmjs.org/tinycolor/download/tinycolor-0.0.1.tgz

> [email protected] install /usr/local/lib/node_modules/spmx/node_modules/fis/node_modules/fis-command-release/node_modules/livereload-server/node_modules/websocket.io/node_modules/ws
> node install.js

[ws v0.4.20] Attempting to compile blazing fast native extensions.

到上一步就停止了

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.