gulp

介绍

整个项目中涉及:

  1. 第三方库由bower管理。
  2. 打包工具由npm管理。
  3. 打包之后的文件会放置在build文件夹下。
  4. 打包之后有一个index.html为入口文件。
  5. css文件夹下放置一个all.min.css为整个项目的css文件。
  6. js文件夹下分别有mian.js为公用库,view.js为业务逻辑。可供日后优化。

安装依赖

  • 安装node
  • 安装npm
  • 安装bower

运行

gulp server

打包

gulp release

打包策略介绍

  • js分为两部分打包,一部分为公共的第三方库,已经共有组件,一部分为何业务相关的js
  • css 打包为一个,打包入口为 app.css .将其他css利用import的方式引入,这样可以有效控制,css的先后顺序,放置样式被重写,造成混乱,无法管理
  • 由于公共组件多有bower统一管理,为了此打包策略可以在每个项目中通用,则我会根据 component下的js文件为主,而开发者增加第三方库时无需修改打包策略。

** 说明 :特别特别建议用mac,由于我用windows,而npm下载的工具包,文件层次很深,文件名称偏长,无法删除,也无法复制粘贴。所以大家可以读gulpfile.js文件自己亲自试验**

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,883评论 1 32
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 6,006评论 4 50
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 5,224评论 0 13
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 8,429评论 7 55
  • 推荐安装软件:node,webstorm 通过npm安装gulp 初始化npm,生成package.json:np...
    Jadann阅读 5,316评论 0 1

友情链接更多精彩内容