與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; 
} 

我希望有幫助。