Grunt 的 CSS 版本号

Question

我将 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']);
};

Answer 1

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

您需要在 gruntfile.js 中添加它。

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

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

您需要在您的 html 中替换为提供 assest.json 的版本。我建议使用 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;
}

希望对您有所帮助。