基于gulp的多页应用打包

菜lee

实现功能主要有

  • 热加载,本地服务器,文件监听,动态刷新

  • 处理图片(优化图片,压缩)

  • 处理scss(压缩合并,兼容前缀,base64,md5,雪碧图,px2rem高清方案)

  • 处理js(模块化开发,压缩合并混淆)

  • html动态更新css,js引用的md5码

项目链接:gulp-multipage

使用方法

1. 依赖安装

- 安装nodejs 本机采用v6.10.1版本
- git clone git@github.com: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
    │      footer.html
    ├─images
    │  └─sprite
    │      ├─a
    │      └─index
    ├─js
    └─scss
- 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. 代码的编写路径问题

根据代码结构,建议在编写代码的过程中页面独有资源采用相对路径,获取公用资源建议采用绝对路径,绝对路径根目录为dist目录

6. 运行模式

  • 开发

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

  • 发布

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

阅读 3.1k

前端混子

731 声望
4 粉丝
0 条评论

前端混子

731 声望
4 粉丝
文章目录
宣传栏