沒辣麼大的公司怎麼發佈前端代碼和控制版本

最近項目要發佈到客戶服務器上以供客戶測試，更改js，css等資源代碼後，功能還是有問題，打開調試臺，原來有緩存–緩存–緩存！”大哥“提出了要求，加個版本號吧，大概就想下邊醬紫

<script src='js/angular.js?v=1.0'></script>

但是，這是一個，多了咋辦呢，比如引入了二三十個js，css等相關的資源（因爲還沒調試結束，還沒合併及打包），總不能手動改吧，顯的蠢蠢的，學了編程，心想加個變量吧，每次改一下變量就好。

var version=1.0;
<script src='js/angular.js'+version></script>
<script src='js/ui-router.js'+version></script>

首先這並不可行，因爲src裏都是解析字符串，變量不認啊。而且“大哥”又進一步提出需求，要有更改的，從新拉取資源，沒更改的資源從緩存裏邊取資源。這是要逼死我這小前端呀。通過這種手增加的方式，你怎麼知道你改了那個資源文件，雖然svn上可以看到哪些是待提交的，但是，這明顯是一種很蠢的方式，這時候就需要前端自動化工具出場了，grunt，gulp，webpack都類似，我瞭解點grunt，這裏介紹grunt。

根據“大哥”的需求，文件變了，加的版本號也跟着變化，把文件本身和版本號聯繫起來，經大神提點想到了hash的方法。grunt-filerev，代碼看效果

//文件夾結構
js/angular.js
js/ui-router.js
//filerev以後
js/angular.10347079.js
js/ui-router.354513745.js

其hash值是根據資源內容變化的，如果你更新了js的代碼，重新執行filerev方法，這個hash值也會跟着變化，所以就能區分出更新的，並重新拉取資源。資源名稱變化了，所以我們需要把index等html文件裏的路徑也跟着更新了，就需要usemin。

//原來資源路徑
<script src='js/angular.js'></script>
<script src='js/ui-router.js'></script>
//usemin以後
<script src='js/angular.10347079.js'></script>
<script src='js/ui-router.354513745.js'></script>

現在是不是，想看看Gruntfile.js文件怎麼寫的了

module.exports = function(grunt) {
 grunt.initConfig({
    usemin: {
      html: 'ngcvs.html',
    },
    filerev: {
      //這裏不寫option默認就是8位的md5
      js: {
        src: ['dest/js/*.js'],
        dest: 'js/'
      },
      css: {
        src: ['dest/css/*.css'],
        dest: 'css/'
      },
    },
    copy: {
      js: {
        expand: true,
        src: 'js/*',
        dest: 'dest/',
      },
      css:{
        expand: true,
        src: 'css/*',
        dest: 'dest/',
      },
      html:{
        expand: true,
        src: 'ngcvs.html',
        dest: 'dest/',
      },
      html1:{
        expand: true,
        cwd : 'dest',//相對路徑
        src: 'ngcvs.html',
        dest: '',//copy到跟目錄
      },
    },
    clean: ["js/*","css/*","ngcvs.html"],
  });
  //obviously需要執行npm install grunt grunt-filerev grunt-use grunt-contrib-copy grunt-contrib-clean --save-dev 命令
  grunt.loadNpmTasks('grunt-filerev');
  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');


  //第一次執行的時候，只需要copy就好，將js代碼複製帶dest/js文件夾下，是保持源文件的純潔性，以後修改的時候就改這裏的文件。
  //但是引入的不是dest文件下的資源，而是編譯以後js文件夾下的資源
  grunt.registerTask('first', ['copy']);
  //首先將js文件夾下的資源刪除，並從dest裏filerev到js裏，並usemin更新html的引入路徑
  grunt.registerTask('default',['clean','filerev','copy:html1']);
  grunt.registerTask('build', ['usemin']);

};

如果之前沒用過grunt，請先看getting-started，再不會請留言
寫好了Gruntfile.js 和安裝了上述的幾個插件（package.json隨之更新），接下來執行如下命令

//第一次部署後執行，目的是將js，css備份到dist文件夾，以防被更改
grunt first
//之後每次部署，需要執行
grunt
grunt build

github demo請點這裏，可以download 練手

這裏介紹了不太大的公司如何發佈項目，參考文章並瞭解大公司如何部署前端代碼