用grunt进行前端工程化之路
我们的项目wecash4.0的前端构建考虑过用fis和grunt.
目录:
前期调研:fis vs grunt vs gulp?
一.安装grunt和项目.
fis是百度fex研发的构建工具,非常方便,非常强大.
简单的几句代码就可以完成对项目的构建.
但是,fis它那个自动更新引用资源的名字的功能有个问题就是它更新后的名字都是绝对路径的,比如原来是这么引用的<script src="index.js" />,现在被它构建后成了<script src="/index.js">,这样当你的项目是放在二级域名的个根目录下的文件夹,比如是book.douban.com的时候你就会发现你所有对引用资源的引用的路径都不正确了,报404了.
虽然它官方说有个设置可以改变 这个(把引用路径都设置成绝对路径),但是我找了一通之后还是没弄好.
所以但是我们最后还是决定不用fis.
我们决定用grunt-这个当前业界最流行的构建工具(
千辛万苦,终于可以对js文件添加md5戳而且在所有页面找到引用的js文件而且更新成他们添加md5戳后的名字,但是仔细一看,诶,不对,居然只有每个页面最后一个脚本的文件被更新了.
二.写配置文件.
用grunt进行前端工程化之路的更多相关文章
- Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之资源定位]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- 前端工程化开发之yeoman、bower、grunt
上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...
- 前端工程化系列[04]-Grunt构建工具的使用进阶
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...
- 前端工程化系列[03]-Grunt构建工具的运转机制
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...
- [转]基于gulp和webpack的前端工程化
本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- 一个「学渣」从零开始的Web前端自学之路
从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...
随机推荐
- 用systemd脚本自动启动node js程序
vi /usr/lib/systemd/system/pano.service [Unit] Description=pano - main site of site_name.com Documen ...
- OpenGL ES 中的模板测试
模板测试的主要功能是丢弃一部分片元,相对于深度检测来说,模板测试提出的片元数量相对较少.模板测试发生在剪裁测试之后,深度测试之前. 使用模板测试时很重要的代码提示: 1.glClear( GL_STE ...
- 在win7下将CapsLock按键变成esc
我喜欢用vim来编辑,经常要按到esc,但是去按那个按键确实比较的远,而且CapsLock这个按键对我来说着实有些鸡肋,所以就想在win7上也能像ubuntu那样把capslock映射为esc,在网上 ...
- <读书笔记>软件调试之道 :从大局看调试-发现代码存在问题
声明:本文档的内容主要来源于书籍<软件调试修炼之道>作者Paul Butcher,属于读书笔记.欢迎转载! ---------------------------------------- ...
- HBase的伪分布式安装(原创)
准备工作: 1)安装了伪分布式hadoop:参照http://blog.csdn.net/zolalad/article/details/11472207 2)修改已安装好的hadoop配置文件: a ...
- redis 基本数据类型
概述 Redis的键值可以使用物种数据类型:字符串,散列表,列表,集合,有序集合.本文详细介绍这五种数据类型的使用方法.本文命令介绍部分只是列举了基本的命令,至于具体的使用示例,可以参考Redis官方 ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- Android-monkey稳定性测试(多台设备同时进行)
1.目的(原创文章,转载请注明出处-) 主要为指引开展android平台应用的稳定性测试,尽可能地在应用发布前发现crash及an ...
- Mathematica(MMA)闪电入门系列 目录与说明
Mathematica(MMA)闪电入门系列 入口 本文起到目录作用,点击以下链接,可以打开各章: 一.MMA概述二.表操作三.函数与递归四.表达式的计算五.过程式编程和调试技巧六.图形七.程序包 ...
- jmeter执行顺序