目前有什麼好的js和css版本控制程序？

01-02

可以是配合nodejs環境下的grunt等構建工具
聽說有百度的fis 不過貌似有點複雜
現在只有grunt 還無法直接控制在html直接引入可以css和js修改後根據hash生成的文件名！！
或者grunt構建工具+github如何巧妙的控制js各個版本呢

推薦你使用兩個 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 也有類似的插件，不過不知道能不能提供以上兩個工具所具備的功能，你可以搜搜看。也可以參考 @游志軍的回答。

補充下 @寸志的回答。

gulp 對應的插件有：

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

開發時：

& & & & & & & & & &


說明：如上述代碼運行不通過可能是插件版本問題，請參照最新官方文檔自行修改。

我們維護了一個版本號列表文件，前端發布的時候寫這個文件，線上伺服器則定時讀這個文件。
這樣每次發布線上的伺服器都可以自動更新時間戳，然後在頁面渲染的時候自動將時間戳帶上。

尼瑪，自己寫個吧。。
國內的互聯網開發團隊，前端和後端是如何配合工作的？ - 莫言的回答

用 gulp-rev 跟 gulp-rev-replace 插件，前者是給打包的文件添加hash值，後者是幫忙替換到相應的位置（僅僅用gulp-useref，可以完成打包跟替換，但不包括加hash值等操作，）。其他用法中用到的 gulp-usemin，我也用過，代碼要比這個更簡單，不過 gulp-usemin 已經被列入了 gulp官方的blacklist，所以改用了 gulp-useref，用法如下：
gulpfile.js
var gulp =require("gulp"),

useref = require("gulp-useref"),

uglify = require("gulp-uglify"),

cleancss = require("gulp-clean-css"),

rev = require("gulp-rev"),

revReplace = require("gulp-rev-replace"),

gulpif = require("gulp-if");

gulp.task("pack", function () {

return gulp.src("./src/**/*.html")

        .pipe(useref())             //pack the file in index.html with build comment

        .pipe(gulpif("*.js", uglify()))       // minify js

        .pipe(gulpif("*.js", rev()))          // append hash to the packed js file

        .pipe(gulpif("*.css", cleancss()))    // minify css

        .pipe(gulpif("*.css", rev()))         // append hash to the packed js file

        // substitute the useref filename with the hash filename in index.html

        .pipe(revReplace())

        .pipe(gulp.dest("dist"));

};   
gulp.task("default", ["pack"]);


不需要用兩次gulp-rev-replace，只需要在gulp-rev之後用一次就可以
構建前需要在html文件中添加 build 的注釋，這是給gulp-useref用的（gulp-usemin也用同樣的注釋）
構建前：

 
&

  &

    &

    &
    &
    &

  &

  &

    &

    &

  推薦閱讀：


TAG:前端開發 | JavaScript | Nodejs | 版本控制 |