网站js和css的版本管理,原理是什么,咋实现的

html-css014

网站js和css的版本管理,原理是什么,咋实现的,第1张

别人项目中到底是怎么管理的我不知道, 就你举例的那几个问题可以瞎扯一下。

1. osc 的 js, css 加了版本参数是因为这些文件都被缓存在了客户端,当服务器有修改的时候把参数改一下,客户端会取最新的

2. 猪八戒JS和CSS, http://t4.zbjimg.com/min/ 是个后台服务,把参数传递给他的所有js 或者css 合并压缩成一个文件,为的是减少客户端的请求数(我想后台也应该有个合并后的缓存文件,最后的参数 v 和上面说的作用一样)

3. 百度的我没有帐号,也就没有去看, 如果真如你所说的那样js/css和每个用户相关,那可能是模版生成的吧。

4. css / js 放到单独的文件还是直接写在页面这是需要自己权衡。 共用的代码建议放到单独的文件,方便管理。 如果是某个页面才会用到那放到页面更合适。

ulp 对应的插件有:

sindresorhus/gulp-rev · GitHub

jonkemp/gulp-useref · GitHub

与之配合的插件有:

jamesknelson/gulp-rev-replace · GitHub

sindresorhus/gulp-filter · GitHub

terinjokes/gulp-uglify · GitHub

ben-eb/gulp-csso · GitHub

开发时:

<html>

<head>

<!-- build:css({.tmp,src}) /assets/styles/main.css -->

<link rel="stylesheet" href="styles/one.css">

<link rel="stylesheet" href="styles/two.css">

<!-- endbuild -->

</head>

<body>

<!-- build:js({.tmp,src}) /assets/scripts/main.js -->

<script type="text/javascript" src="scripts/one.js"></script>

<script type="text/javascript" src="scripts/two.js"></script>

<!-- endbuild -->

</body>

</html>

构建后:

<html>

<head>

<link rel="stylesheet" href="/assets/styles/main-b8e5904e.css">

</head>

<body>

<script src="/assets/scripts/main-912c3511.js"></script>

</body>

</html>

构建代码:

var gulp = require('gulp')

var rev = require('gulp-rev')

var revReplace = require('gulp-rev-replace')

var useref = require('gulp-useref')

var filter = require('gulp-filter')

var uglify = require('gulp-uglify')

var csso = require('gulp-csso')

gulp.task('index', function() {

var jsFilter = filter('**/*.js', {restore: true})

var cssFilter = filter('**/*.css', {restore: true})

var userefAssets = useref.assets()

return gulp.src('src/index.html')

.pipe(userefAssets) // 解析html中build:{type}块,将里面引用到的文件合并传过来

.pipe(jsFilter)

.pipe(uglify()) // 压缩Js

.pipe(jsFilter.restore)

.pipe(cssFilter)

.pipe(csso()) // 压缩Css

.pipe(cssFilter.restore)

.pipe(rev())// 重命名文件

.pipe(userefAssets.restore())

.pipe(useref())

.pipe(revReplace()) // 重写文件名到html

.pipe(gulp.dest('dist'))

})

说明:如上述代码运行不通过可能是插件版本问题,请参照最新官方文档自行修改。

作者:游志军

链接:http://www.zhihu.com/question/27548038/answer/37140329

来源:知乎

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

推荐你使用两个 Grunt 插件:

cbas/grunt-rev · GitHub:生成文件的 hash,使用对应的 hash 重命名文件;

yeoman/grunt-usemin · GitHub:可与 grunt-rev 结合使用,替换 html 和 css 中的静态引用为加了 hash 之后的文件。

在 grunt-usemin 中提供了两个 grunt task,一个是 useminPrepare,允许你在 HTML 中对要合并打包的文件进行标记,可以自动生成合并的 cssmin、concat 的配置,后两者根据这些配置,合并生成所需的文件。另外一个是 usemin,这个 task,往往被使用者所忽略,不过它非常强大,就是提供了你所想要的替换功能。

在 Teambition 就是使用这两个插件来构建的。

补充:gulp 也有类似的插件,不过不知道能不能提供以上两个工具所具备的功能,你可以搜搜看。

作者:寸志

链接:http://www.zhihu.com/question/27548038/answer/37080465

来源:知乎

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

给CSS、JS添加版本号可以防止客户端缓存。

比如:<script src="001.js?2015120710"></script>

001.js?2015120710 ?后面的2015120710是当前js的日期。

如果自动添加,建议还是以日期作为版本号,当然也可以通过程序随机生成一组数字或字符。