没辣么大的公司怎么发布前端代码和控制版本

最近项目要发布到客户服务器上以供客户测试，更改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 练手

这里介绍了不太大的公司如何发布项目，参考文章并了解大公司如何部署前端代码