• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

li2568261/gulp-multipage: 基于gulp的一款多页面开发工具

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

li2568261/gulp-multipage

开源软件地址(OpenSource Url):

https://github.com/li2568261/gulp-multipage

开源编程语言(OpenSource Language):

JavaScript 92.4%

开源软件介绍(OpenSource Introduction):

基于gulp的多页应用打包

实现功能主要有

  • 热加载,本地服务器,文件监听,动态刷新
  • 处理图片(优化图片,压缩)
  • 处理scss(压缩合并,兼容前缀,base64,md5,雪碧图,px2rem高清方案)
  • 处理js(模块化开发,压缩合并混淆)
  • html动态更新css,js引用的md5码

项目链接:gulp-multipage

使用方法

1. 依赖安装

- 安装nodejs 本机采用v6.10.1版本;

- 全局安装gulp:npm install gulp -g

- git clone [email protected]:li2568261/gulp-multipage.git;

- 在当前目录下打开命令行(tips:按住shift点击鼠标右键可在菜单处快速打开);

- 运行npm install 等待安装即可;

ps:未翻墙的同学建议采用cnpm进行npm install操作

2. 资源代码目录(如果不需要雪碧图功能,请在gulpfile.js文件中的task:pictureInit删除sprite任务,否则会报错):

- 资源目录src


- src的lib目录存放公用资源:


```
目前主要包含三个目录:

commonHtml存放页面公用部分

images存放相关图片

sprite存放合成雪碧图相关图片

js存放js组件,以及一些通用方法

scss存放相关公用样式、组件样式、sprite相关类样式

    ├─commonHtml
    │      header.html
    │      record-dialog.html
    │
    ├─images
    │     close.png
    │     header-img.png
    │     wait-img.gif
    │
    │
    ├─js
    │      bscroll.min.js
    │      common.js
    │      jquery-1.9.1.min.js
    │      lib.js
    ├─scss
    │      a-sprite.scss
    │      dialog.scss
    │      index-sprite.scss
    │      reset.scss
    │      sprite-mixin.scss
    │
    └─sprite
```


- pages目录不同的页面新建不同的文件夹,里面都存在相同的目录结构:


```
    在页面当前目录下直接存放html文件命名自取最终导出html文件名与初始命名相同;
    在页面上的js已经scss文件夹分别存放相应的js和样式文件,命名无要求吗,导出文件名称格式为(页面名称).min.[js|css];
    ├─a
    │  │  a.html
    │  ├─images
    │  ├─js
    │  │   a.js
    │  └─scss
    │      a.scss
    └─index
        │  index.html
        ├─images
        ├─js
        │  index.js
        └─scss
           index.scss
```

3. 页面资源配置

参照/config/pagesConfig.js配置,建议遵守demo上的路径配置规则(ps未配置的页面不会进行资源整合处理)

    //以下分别为js和样式文件的别名设置
    var jsFileAlias = {
        jq : path.join(libPath,"/js/jquery-1.9.1.min.js"),
        libjs : path.join(libPath,"/js/lib.js")
    }

    var styleAlias = {
        common : path.join(libPath,"/scss/base.scss"),
        spriteMixin: path.join(libPath,"/scss/sprite-mixin.scss"),
        aSprite : path.join(libPath,"/scss/a-sprite.scss"),
        indexSprite : path.join(libPath,"/scss/index-sprite.scss")
    }
    //allConfig只需要添加需要额外加入的文件;"额外、额外、额外重要的事情说三遍"
    
    //使用雪碧图请加入styleAlias.spriteMixin文件例index项下的import_style,"雪碧图+spriteMixin*3"
    var allConfig = {
        a:{
            import_js:[jsFileAlias.jq,jsFileAlias.libjs],
            import_style:[styleAlias.common]
        },
        index:{
            import_js:[jsFileAlias.jq,jsFileAlias.libjs],
            import_style:[styleAlias.spriteMixin,styleAlias.aSprite]
        }
    }

4. 资源导出目录

资源导出目录dist为文件资源导出目录,需要配合启动服务器进行处理分为两个文件夹,images和pages;images仅存放通用的图片资源。pages目录结构和资源目录一致

5. 运行模式

  • 开发

在当前文件根目录下执行命令 npm run dev; 修改src相关文件,dist相关文件也会进行相应更新

  • 发布

在当前文件根目录下执行命令 npm run pub,dist文件即为发布文件




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap