三重水的博客

在变化当中不断记录自己，充实自己，浏览自己

Spm瀑布流模块包的使用

这里是如何使用模块包，想要了解如何构建模块包可以看构建spm瀑布流模块包

源码结构(前端写的静态页面一般都是如下结构，即可在自己的这个结构上进行spm引用包辅助开发,然后下边会用到$ spm build命令来构建这些代码，从而生成我们要的最终代码，放在dist文件夹里)

  • pubuliu
    • css
    • images
    • index.html
    • index.js

源码可以在我的github上下载https://github.com/wenyang12/bupuliu/tree/v1

引入瀑布流模块测试（在下载以上源码后，进入这个源码文件夹pubuliu，在这里边开发测试）

安装spm包管理

npm install -g spm

安装瀑布流模块

spm install moving-water

js引入（源码中我已经在index.js中放入了下边的js代码了）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var movingWater = require('moving-water');//引入瀑布流模块
movingWater.init('.pubuliu-box','.img-box',callback);
function callback(parent) {
    //模拟数据
    var ajaxData =[{src:'images/1.jpg'},{src:'images/2.jpg'},{src:'images/3.jpg'},{src:'images/4.jpg'},{src:'images/5.jpg'},{src:'images/6.jpg'},{src:'images/7.jpg'},{src:'images/8.jpg'},{src:'images/9.jpg'},{src:'images/10.jpg'}];
    ajaxData.forEach(function(el) {
        var imgBox = document.createElement('div');
        var imgInner = document.createElement('div');
        var img = document.createElement('img');
        imgBox.className='img-box';
        imgInner.className = 'img-inner';
        img.src = el.src;
        imgInner.appendChild(img);
        imgBox.appendChild(imgInner);
        parent.appendChild(imgBox);
    });
}

本地运行

spm server

在浏览器输入http://127.0.0.1:8000/index.html 即可预览

构建最终代码（不用先建一个dist文件夹，构建时会自动创建这个文件夹）

spm build index.html css/*.* //这里构建的时候默认自动构建index.js

mkdir dist/images //这里因为构建代码images的时候，会提示没有images文件夹，所以先创建这个文件夹

spm build images/*.*

用make构建 需要创建一个Makefile文件，我这里的源码已经有了，这个文件的代码如下

1
2
3
4

build:
  @spm build index.html css/*.*
  @mkdir dist/images
  @spm build images/*.*

其实就是用make编译，帮我们自动执行Makefile里边写入的一个个命令，不用手动每次自己敲。但是，要保证自己电脑安装了make编译，可以安装cygwin;

然后安装时，添加一个镜像http://mirrors.163.com/cygwin/ 添加镜像图

然后接着下一步选取make点击下一步安装即可

添加镜像图

make build //即可执行Makefile文件里写入的命令，已达到同样效果

最终的代码会被放入dist这个文件夹下。 最终的效果可以看我的v2版本

评论