最近有好多需求是把一堆图片，或者一张长图转成HTML文件在客户端展示，所以想尝试自动化这一过程，简单实验了一个HTML5生成器。

功能：

根据文件夹中图片文件生成简单HTML5展示页面

安装

$ npm install -g html5fromImages

使用

$ html5fromImages [图片文件夹所在路径] [生成目标路径] [网页title]

$ html5fromImages ~/git/yqx/web/littlec-emsweb/app/help/sysc_fw/images/ dist-test 示例网页

参考文档

用Node.js写生成器是件非常简单的事儿，原因是

Node.js模块开发简单，js语法，而且二进制cli模块也极其简单

Npm发布包是所有开源的包管理器里最简单好用的

辅助模块多，将近40万个左右

这里精简一下，你只需要5步

初始化模块

cli二进制模块

模板引擎使用

解析cli参数和路径

npm发布

这里假定你已经安装了Node.js，至于是什么版本，如何安装的并不重要。

先要介绍一下，什么是Npm？

npm is the package manager for

browsers

javascript

nodejs

io.js

mobile

bower

docpad

test

简单理解：NPM(node package manager)，通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。只要安装了Node.js，它会默认安装的。

1)初始化模块

确认模块名称是否已被发布

$ npm info html5fromimages

如果没有找到对应的包，说明你可以使用这个名字，然后在github建立仓库，clone到本地即可

$ git clone html5fromimages

$ npm init -y

生成package.json文件，此文件为模块的描述文件，非常重要。

{

"name": "html5fromimages",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

说明

main是模块的入口文件，即普通代码对外提供调用的api入口。

scripts是npm scripts非常便利的，只要在package.json所在目录下，你执行npm test就会调用这里的test配置。如果是test，start等内置命令之外的，可以通过npm run xxx来定义

2)cli二进制模块

Node.js分2种模块

普通模块，供代码调用

二进制模块，提供cli调用

大家都知道，生成器是cli工具，所以我们应该使用cli二进制模块

手动修改package.json文件

{

"name": "a",

"version": "1.0.0",

"description": "",

"main": "index.js",

"bin": {

"html5fromImages": "html5fromImages.js"

},

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

这里主要增加里一个bin的配置，bin里的html5fromImages为cli的具体命令，它具体执行的文件是html5fromImages.js。

既然html5fromImages的执行文件是html5fromImages.js，我们当然需要创建它

$ touch html5fromImages.js

填写

#!/usr/bin/env node

var argv = process.argv;

var filePath = __dirname;

var currentPath = process.cwd();

console.log(argv)

console.log(filePath)

console.log(currentPath)

说明

argv是命令行的参数

filePath是当前文件的路径，也就是以后安装后文件的路径，用于存放模板文件非常好

currentPath是当前shell上下文路径，也就是生成器要生成文件的目标位置

至此，二进制模块的代码就写完了，下面我们测一下

1)本地安装此模块

在package.json文件路径下，执行

$ npm link

/Users/sang/.nvm/versions/node/v4.4.5/bin/gen -> /Users/sang/.nvm/versions/node/v4.4.5/lib/node_modules/a/gen.js

/Users/sang/.nvm/versions/node/v4.4.5/lib/node_modules/a -> /Users/sang/workspace/github/i5ting/a

此时说明已经安装成功了。

2)html5fromImages

$ html5fromImages

[ '/Users/sang/.nvm/versions/node/v4.4.5/bin/node',

'/Users/sang/.nvm/versions/node/v4.4.5/bin/gen' ]

/Users/sang/workspace/github/i5ting/a

/Users/sang/workspace/github/i5ting/a

可以换不同的目录来测试一下，看看结果的不同，来体会上面3个变量的妙用。

3)模板引擎使用

模板引擎是一种复用思想，通过定义模板，用的时候和数据一起编译，生成html，以便浏览器渲染。从这个定义里我们可以找出几个关键点

编译(模板 + 数据) => html

模板引擎有好多种，下面介绍2种典型的模板引擎

ejs：嵌入js语法的模板引擎(e = embed)，类似于jsp，asp，erb的，在html里嵌入模板特性，如果熟悉html写起来就非常简单，只要区分哪些地方是可变，哪些地方是不变即可

jade：缩进式极简写法的模板引擎，发展历史 HAML -> Jade -> Slim -> Slm，最早是ruby里有的，目前以jade用的最多，这种写法虽好，，但需要大脑去转换，这其实是比较麻烦的，如果对html不是特别熟悉，这种思维转换是非常难受的。

这里我们选一个，目前Node.js里最火的应该也是最好的Nunjucks，我感觉它和ejs比较像，但跟jade一样强大，语法据说出自Python的某款模板引擎

$ npm install --save nunjucks

然后我们修改模板引擎

#!/usr/bin/env node

var fs = require('fs')

var nunjucks = require('nunjucks')

var tpl = fs.readFileSync(filePath +'/html5fromImages.tpl').toString()

var compiledData = nunjucks.renderString(tpl, {'items':res,'title':title});

fs.writeFileSync(distPath + '/index.html', compiledData)

console.log('----finished----');

这里我们只看nunjucks代码。

1)引入nunjucks模块

2)nunjucks.renderString方法是编译模板用的，它有2个参数

第一个是模板字符串

第二个是json数据

3)compiledData就是编译后的结果

结合上面说的模板引擎原理，

编译(模板 + 数据) => html

再理解一下，效果会更好。

创建一个html5fromImages.tpl，内容为

{{title}}

body,html {

margin:0 !important;

text-align:justify;

}

.container{

width:100%;

}

img{

width:100%;

display: block;

}

下面我们看看如何用html5fromImages.js来读取模板。

var fs = require('fs')

var nunjucks = require('nunjucks')

var tpl = fs.readFileSync('./html5fromImages.tpl').toString()

var compiledData = nunjucks.renderString(tpl, { username: 'James' });

console.log(compiledData)

1)引入fs模块，因为要读取文件

2)fs.readFileSync('./html5fromImages.tpl').toString()，使用了一个读取文件的同步方法，并把文件内容转成字符串，原来是buffer

读文件还是挺简单吧。那么写文件呢？

fs.writeFileSync('./html5fromImages.html', compiledData)

至此，一个生成器的模型就出来

#!/usr/bin/env node

var fs = require('fs')

var nunjucks = require('nunjucks')

var tpl = fs.readFileSync('./html5fromImages.tpl').toString()

var compiledData = nunjucks.renderString(tpl, {'items':res,'title':title});

console.log(compiledData)

fs.writeFileSync('./html5fromImages.html', compiledData)

思考一下，可变得有哪些？

'./html5fromImages.tpl'是输入模板

{'items':res,'title':title} 要编译的数据

'./html5fromImages.html'是最终的输出

那么，剩下的事儿就是围绕可变得内容来构造你想要的功能。

4)解析cli参数和路径

要说生成器，最经典的是rails的scaffold，曾经缔造了一个15分钟blog的神话

$ rails g book name:string coordinates:string

如果我们要实现它，怎么做呢？

rails g是固定的用于生成的命令

book是模型名称，俗称表名

而name和coordinates都是字段名称，string是表中的类型

可变的只有表名和字段信息。所以只要解析到这些就够了，换成我们的gen命令，大概是这样

$ gen book name:string coordinates:string

html5fromImages.js代码

#!/usr/bin/env node

var argv = process.argv;

console.log(argv)

执行gen命令的结果是

$ gen book name:string coordinates:string

[ '/Users/sang/.nvm/versions/node/v4.4.5/bin/node',

'/Users/sang/.nvm/versions/node/v4.4.5/bin/gen',

'book',

'name:string',

'coordinates:string' ]

这时候，可以再仔细看看我们html5fromImages.js的代码

读写文件使用 fs

复制文件夹使用child_process shell命令

对文件名排序 Array.sort( [ sortFunction ] ) 比较其中数字大小

process.argv 获取输入变量 从第3位开始

排除隐藏文件等 判断是否为图片文件

#!/usr/bin/env node

var fs = require('fs')

var nunjucks = require('nunjucks')

var child_process = require('child_process')

//复制文件夹

function copyDir(src, dist) {

child_process.spawn('cp', ['-rf', src, dist]);

}

//根据数字比较文件名

function sortNumber(a,b)

{

var first = a.filename.replace(/[^\d]/g, '')

var secend = b.filename.replace(/[^\d]/g, '')

return first - secend;

}

//判断是否为图片文件

function checkImageFile(file){

if( file.substring(file.indexOf('.')) =='.png' ||

file.substring(file.indexOf('.')) =='.PNG' ){

return true;

}

return false;

}

var filePath = __dirname;

var currentPath = process.cwd();

var imagesPath = process.argv[2] ? process.argv[2] : currentPath;

var distPath = process.argv[3] ? process.argv[3] : currentPath + '/dist-' + Date.now();

var title = process.argv[4] ? process.argv[4] :'';

console.log(filePath);

console.log(currentPath);

console.log('图片所在路径:' + imagesPath);

console.log('生成文件路径:' + distPath);

var res=[],html = '', files = fs.readdirSync(imagesPath);

if(!fs.existsSync(distPath)){

//rmDir(distPath);

fs.mkdirSync(distPath);

}

files.forEach(function(file){

var filename = file

, stat = fs.lstatSync( imagesPath + '/'+filename);

if (!stat.isDirectory() && checkImageFile(filename) ){

res.push({'filename':filename});

}

});

res.sort(sortNumber);

var tpl = fs.readFileSync(filePath +'/html5fromImages.tpl').toString()

var compiledData = nunjucks.renderString(tpl, {'items':res,'title':title});

fs.writeFileSync(distPath + '/index.html', compiledData)

copyDir(imagesPath ,distPath+ '/images');

console.log('----finished----');

至此，完成了所有代码。此时你在任意目录输入

$ html5fromImages [图片文件夹所在路径] [生成目标路径] [网页title]

$ html5fromImages ~/git/yqx/web/littlec-emsweb/app/help/sysc_fw/images/ dist-test 示例网页

你会发现目标路径下会有一个html5fromImages.html文件，和images文件夹。

5)npm发布

在package.json目录里执行

$ npm publish .

就可以了发布成功了。

如果你想增加版本号，再次发布，你需要2步

$ npm version patch

$ npm publish .

你可以自己测试一下

$ npm i -g xxxxxx

发布时遇到的问题

重置为官方镜像

$ npm config set registry http://registry.npmjs.org/

然后 按照提示 注册 adduser 登陆 再publish 就能够成功

2. 注意npm的模块名不能有大写字母

通过

$ npm install -g html5fromImages

就可以使用了

更多

整体来说，还是一个非常实用的模块，而且比较简单，适合入门。

目前只是基础版本，有待进一步完善优化

异常：各种可能的异常捕获及处理

测试：

工具模块：比如使用debug模块处理调试信息，日志等

argv解析模块：commander 或者yargs

实用工具，比如各种大小写转换，驼峰式

最后

可以开始尝试写我们自己的项目生成器啦。