admin管理员组文章数量:1532440
一,为啥要用构建工具
项目中的js和css属于静态文件,客户端第一次访问的时候会缓存这些文件,那就意味着当我们需要改js跟css的时候,即使我们将文件中的代码改了重新发布,那么客户端也是看不到,客户端发现缓存中有同样路径的文件,直接读取。
之前做的项目中,项目上线后客户打开一看:“那谁,这里那里需要改动一下”。我就操起键盘改css样式,改js业务逻辑,然后一发布,屁颠屁颠的跟客户讲:“大佬,已经改好了,您老再看!”
可当客户再次打开页面的时候,问题还是那个问题。奇了怪了,我本地是好的啊。思前想后才想起浏览器缓存这么一说,让客户清除浏览器缓存就好了,但不是很多客户都喜欢去清除浏览器缓存,他们只会觉得这样好麻烦。
那么怎么办?我想很多程序员都知道加一个版本号就可以了,这样浏览器就会认为这是一款全新的游戏。。。。额,错了,是一个全新的文件,比如原来是 http://www.xxxx/index.js 你现在只需要把地址改为 http://www.xxxx/index.js?v=1.0 即可
但是如果这个动作是手动的,那么很大可能我们将会忘掉去手动敲这个版本号 。那么这就是为什么我们需要前端构建工具。前端构建工具有很多,grunt、gulp、webpack等。今天我们只聊gulp。
二、gulp的引入
打开命令行工具,进入项目所在的根目录下,输入 npm init -y 命令,创建package.json文件。
生成的package.json文件,项目名称,版本号,描述信息均为空,我们用ide打开后将其填上。
package.json文件管理我们项目中的包依赖关系,想了解更多package.json信息,请自行百度。
通过 npm 安装 gulp 包:
安装完gulp以及其他要用到的插件后,packjson.json文件变更如下:
开始使用gulp:
gulp构建工具的配置信息默认是写在gulpfile.js 文件中,在项目的根目录下创建 gulpfile.js,通过require引入gulp以及其他插件
二、gulp的4个核心API
gulp 自身能做的事情不多,主要是通过各种插件来满足我们的需求,gulp本身提供了4个非常简洁的API(很重要,划重点), 掌握这4个API你就基本掌握了gulp的全部。
1.gulp.task
定义:gulp.task(name [, deps, fn])
我们给gulp注册一个任务task,参数name是该任务的名称,deps是可选项,就是这个任务可能会依赖其他的任务tasks, fn是任务要执行的函数,也就是该任务要干啥。
例子中先执行完 task2,task3 ,最后再执行task1任务。task2与task3是并行执行的,不是顺序执行。
2.gulp.src
定义:gulp.src(globs[, options])
与globs 匹配的文件,可以是string或者一个数组。其参数就是一个我们要处理的文件是啥!
我们这里要处理的文件是 ./src/scripts/ 这个路径下的js文件。
3.gulp.dest
定义:gulp.dest( path [, options])
参数path表示文件处理完后要存放的路径,option参数一般不用,无需了解。
4.gulp.watch
定义:gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
gulp.watch就是监视某路径下文件的变化,然后运行指定的任务Tasks或者函数。
这里gulp监视 ./src/scripts/ 路径下的所有js文件是否发生变化,若有则运行 scripts 这一task任务。
版权声明:本文标题:前端构建工具-gulp !(解决浏览器缓存问题) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725799258a1043359.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论