nopo

task-based build tool for web project

npm install nopo
4 downloads in the last month

NoPo - Web项目自动化构建和编译工具

NoPo (No-Person-Operation) 是一个基于 NodeJS 平台的任务型 Web 项目自动化构建和编译工具,能够通过简单的 json 配置文件,实现项目自动打包,资源压缩、合并、变量替换(时间戳修改等)、自动sprite合图等前端项目常见的繁琐工作,减轻前端工程师工作压力,提供幸福感 ^_^。

NoPo 安装

  1. 下载并安装 Node.js环境
  2. git clone https://github.com/rehorn/nopo.git
  3. nmp install nopo (todo)
  4. 参照 test/nopo-test/nopo.js 写一个配置脚本
  5. nopo

NoPo 特色

  1. 配置简单,使用前端工程师熟悉的 JSON 进行配置
  2. 更多的内置任务,基本涵盖大部分常见的前端构建工作
  3. 基于 NodeJS,部分高级任务基于 Python,跨平台
  4. NoPo 中一个最小操作单位是命令(cmd),一个任务(task)可以包含多个命令
  5. 支持并行、串行命令和任务定义,更加高效
  6. 引入命令管道概念,在串行命令中,上一个命令的输入将作为下一个命令输出

NoPo 内置任务

  • build: 常用 web 项目编译任务
  • clean:删除文件或文件夹
  • concat:合并多个文件为一个
  • copy:复制文件或文件夹
  • css:css优化命令,如:为图片自动增加时间戳/md5等,添加随机cdn host前缀等
  • deploy:将本地文件通过 ftp/rsync 等方式发布到远程机器
  • examples:命令插件demo
  • exec:子进程执行系统命令简单封装
  • htmlrefs:编译 html,实现引用 js/css 资源合并
  • jsdoc:使用 jsdoc-toolkit/yuidoc 生成 jsdoc 文档
  • lint:js/css 代码质量检查
  • manifest:自动生成 html5 app cache manifest
  • minify:js/css/html 代码压缩
  • optimage:图片资源压缩
  • pack:文件/文件夹打包 zip
  • qzmin:解析 fiddler willow qzmin 文件,文件自定义合并
  • replace:文件内容变量替换
  • require:支持 requirejs 打包
  • sprite:自动合图引擎 tango
  • translate:支持 less/sass/coffee 实时编译成 js/css
  • utest:单元测试
  • ...

NoPo 内建行为

  • file-check:文件类型、大小监控
  • live-build:监控文件系统变动,自动执行制定编译命令

说明

NoPo 前身是本人之前为项目写的一个 python 项目编译脚本 在 WebQQ、Q+、QQ互联、Alloy团队等项目中都有应用 NoPo 是在参考了大量开源项目(如grunt,jake,ant)后,结合工作需要和实践,整理出一套前端工具。 将在后续不断完善,欢迎讨论提意见

安装

windows

git clone https://github.com/rehorn/nopo

linux

git clone https://github.com/rehorn/nopo
cd nopo
chmod +x ./lib/cmd/minify/node_modules/uglify-js/bin/uglifyjs
chmod +x ./lib/cmd/minify/node_modules/uglify-js/bin/cleancss
chmod +x ./lib/cmd/optimage/bin/gifsicle
chmod +x ./lib/cmd/optimage/bin/jpegtran
chmod +x ./lib/cmd/optimage/bin/optipng

config 文件夹说明

支持 glob 配置,如果为文件夹必须以 ‘/’ 结尾 source 选择器示例

./ -> 获取当前目录下所有文件和文件夹(默认加上**,即包含所有子文件夹)
./* -> 获取当前目录下所有文件和文件夹(不包含子目录)
./*.js -> 获取当前目录下所有js文件(不包含子目录)
./***.js -> 等价于 ./*.js
./*/*.js -> 获取一级子目录下js文件,如:‘./test/test.js’
./*/*/*.js -> 获取二级子目录下js文件,如:‘./test/test/test.js’
./**/*/*.js -> 获取子目录级别大于1的目录下js文件,如:‘./test/test.js’, ‘./test/test/test.js’
./*/**/*.js -> 等价于./**/*/*.js
./**/*.js -> 获取当前目录下及子文件夹下所有js文件
./**/*.{js,txt} -> 获取 js/txt 
./abc?.js -> ?指代1个任意字符 如:‘./abc1.js’,
./abc*.js -> *0个以上任意字符 如:‘./abc.js’, ‘./abc1.js’, ‘./abc01.js’
./abc**.js -> *0个以上任意字符 如:‘./abc.js’, ‘./abc1.js’, ‘./abc01.js’
#./aab.js -> 注释用的
!./aab.js -> 非
/ -> 当前盘根目录,如 E:\\
/Server -> E:\\Server\\ 在win平台下推荐使用相对路径写法

关于自动合图约定规范

图片容器大小

为了减低合图算法复杂度,背景图宽高必须和所在容器的宽高一致
如果切图比容器小,建议增加html增加一个大小一致容器,或者通过photoshop工具手动调整切图边框空白

padding对图片容器宽高的影响

切图容器不建议设置padding,在box-sizing:content-box默认设置下,padding会影响容器实际宽高

背景图定位position

尽量避免left/top/center/right/bottom/百分比 (50% 100%) 等定位方式的使用
(如果使用了,在smart合图引擎下,会使用对角线diagnose算法合并)
推荐使用标准px单位,如:background-position: -20 -20;

背景图repeat

repeat不能和position一起使用,使用repeat的图片直接跳过,不参与合图
css中repeat为缺省值,但在实际应用中,大多数情况下,不写 repeat 是因为背景图大小和所在容器的大小一致,开发者省略了
因而在nopo自动合图中,如果css不写repeat,认为是no-repeat
需要横向纵向平铺的样式,必须加上repeat-x,repeat-y

关于background写法

支持background合成写法
推荐使用backgound-image,background-position这样分开的属性写法,替换css的时候可以通过mergeBackground参数选择是否合成background
合并的写法处理

暂跳过含有css3相关 background 新特性的class样式
需要 sprite 的容器避免使用
background-size
background-clip
background-origin

支持background多背景写法,但不推荐使用

@import, @keyframes, @charset, @media, @font-face, @page中规则的处理 只处理@media和部分@keyframes

自动合图引擎tango规则约定

流程:扫描图片 -> 按切图类别合图 -> 扫描css background -> 根据合图信息替换url,增加定位信息
配置项:
imgRoot -> 需要合并的切图根目录, layout -> 合图算法

合图命名规则:
imgRoot下一级子目录按目录单独合并成一个sprite图,默认packing算法,默认将png,gif,jpeg,jpg进行合图
slice1/ -> sprite-slice1.png 默认采用packing合图算法
slice2/ -> sprite-slice2.png
slice-n/ -> 无需进行合并的切换,如大背景图jpg,动态gif,用于repeat的背景纹理等,只做copy操作
slice-1px-x/ -> sprite-slice-x.png -x结尾的文件夹(一般放置width一致需要repeat-x的切图)采用top-down-height合图算法
slice-5px-x/ -> 宽度为5px的repeat-x切图
slice-5px-y/ -> sprite-slice-y.png -y结尾的文件夹(一般放置height一致需要repeat-y的切图)采用left-right-width合图算法

css替换规则

扫描css的background和background-image属性,替换url路径,并添加background-position定位属性
backgound:url(slice/test.png); -> backgound:url(sprite-slice.png);background-position:-20px -20px;
backgound-image:url(slice/test.png);background-position:20 20;(已经sprite过的切图)
-> backgound-image:url(sprite-slice.png);background-position:-20px -20px; (重新计算定位)
background简写优化(optiCss:1)
background-image, background-position等合并为简写background形式

以下background属性写法的样式将不进行替换

含有background-size
含有background-clip
含有background-origin
background-image的url为绝对路径或者http/ftp协议
background-position为left/top/center/50%/100%的组合
background-repeat为显示注明repeat

已经sprite过的图片可以重复sprite

合图引擎会重新计算定位数字

ie6透明解决方案(ie6已经低于20%,尽量简单处理)

1、使用DD_belatedPNG脚本(采用VML,性能优于滤镜,支持sprite,背景平铺,兼容性较好)
2、通过添加fixIe6:1参数,自定生成一张sprite-png8.png合图,自动增加_background-image: url() 属性

合图替换方案 -> datauri + mhtml(ie6/7/8)

datauri
优点:将图片base64打包到css中,可以减少请求
缺点:
ie6/7/8不支持,但有替代方案;
base64比图片大一倍,经过gzip后其实更小
直接对图片进行gzip,某些浏览器可能出现cpu占用高
npm loves you