Grunt 的 CSS 版本号答案

【问题标题】：CSS version numbers with GruntGrunt 的 CSS 版本号
【发布时间】：2017-01-21 18:34:44
【问题描述】：

我正在使用 Grunt 和 php，并且正在使用一个包来对我的 css 进行版本化，日期戳为 style.min.20160913230349.css。

但是，我如何找到一个将新字符串更新到我的 php 页面中的标题的包。 style.min.{grunt_this_string}.css.

我正在寻找一个 usemin，但不知道如何实现它。

<link rel="stylesheet" media="all" href="/css/style.min.20160913230349.css" type="text/css"/>

Gruntfile.js

module.exports = function (grunt) {


  grunt.initConfig({


    /*=============================================
    =            Proxy server                    =
    =============================================*/
    php: {
      dist: {
        options: {
          hostname: 'sau.dev',
          base: 'website-v2', // Project root 
          keepalive: false,
          open: false
        }
      }
    },

    browserSync: {
      dev: {
        bsFiles: {
          src: [
            'website-v2/*.php',
            'website-v2/*/*.php',
            'website-v2/css/*.css'
          ]
        },
        options: {
          proxy: 'sau.dev',//<%= php.dist.options.hostname %>:<%= php.dist.options.port %>
              ghostMode: {
                  clicks: false,
                  forms: false,
                  scroll: true
              },
              logLevel: 'info',//client
              logConnections: true,
              watchTask: true,
              open: 'ui',
              xip: true,
        }
      }
    },

    watch: {
        html: {
          files: ['src/*.html'],
        }
    },

    cssmin: {
      dist: {
          files: {
             'website-v2/css/style.min.css': ['website-v2/css/all.css']
          }
      }
    },

    uglify: {
      dist: {
        files: {
          'website-v2/js/main.min.js': ['website-v2/js/jquery-     1.9.1.min.js','jquery-ui.min.js','main.js','featherlight.js']
        }
      }
    },

    assets_versioning: {
      options: {
        tag: 'date',
        dateFormat: 'YYYYMMDDHH',
        timezoneOffset: 10
      },
      dist: {
        options: {
          tasks: ['cssmin:dist']
        }
      },
    },

  });

  //grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.loadNpmTasks('grunt-php');
  grunt.loadNpmTasks('grunt-assets-versioning');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-string-replace');

  //grunt.loadNpmTasks('usemin');



  //Static Server
  grunt.registerTask('dist', ['versioning']);

  //Proxy Server
  grunt.registerTask('server', ['php:dist','browserSync','watch']);
};

【问题讨论】：

你能给我一个gruntfile.js吗？
你试过files: {'website-v2/css/style.min.css': ['website-v2/css/all.css']}和grunt.registerTask('dist', ['cssmin:dist', 'assets_versioning']);吗？喜欢npmjs.com/package/…
我可以正确使用这些，但我需要更新标签中的链接以动态更新和引用新文件和路径名

标签： css npm gruntjs

【解决方案1】：

了解你的问题后，我认为你需要创建一个assets.map

你需要在gruntfile.js中添加这个。

options: {
    ...
    versionsMapFile: 'assets.json',
    ...
}

我愿意相信grunt-assets-versioning 创建的版本采用日期。

您需要用提供assest.json 的版本替换您的html。我建议为此使用grunt-string-replace。

replace: {
  dist: {
    options: {
      patterns: [
        {
          match: 'style.min.css',
          replacement: replacement()
        }
      ]
    },
    files: [
      {src: ['src/assets/index.html'], dest: 'build/index.html'}
    ]
  }
}

...

grunt.registerTask('versioning', ['assets_versioning']);
grunt.registerTask('replace', ['string-replace']

... 

function replacements() {
    var projectFile = "assets.json";

    if (!grunt.file.exists(projectFile)) {
        grunt.log.error("file " + projectFile + " not found");
        return true;//return false to abort the execution
    }
    var project = grunt.file.readJSON(projectFile);//get file as json object
    var version = project[0].version;
    var replace = ''

    // continue with the algorithm that you need

    return replace;
}

希望对你有帮助。

【讨论】：