在 grunt 中缩小后自动更改 index.html 中的文件引用

Question

我在我的项目中使用 grunt 文件。在这个文件中，我想添加一个过程，在这个过程中它将能够用 index.html.

中的新文件替换以前的缩小文件引用

我正在缩小名称和 date/time 的文件，例如 mm_10/11/2016_5:00.min.js 缩小后时间将更改 mm_10/11/2016_6:30.min.js。但是索引页有以前的文件，即 mm_10/11/2016_5:00.min.js。所以我想用 mm_10/11/2016_6:30.min.js 替换 mm_10/11/2016_5:00.min.js。请在这里帮助我

谢谢

Answer 1

要使此过程动态化，您可以考虑配置 g运行t Grunfile.js 以使用 grunt-contrib-uglify

生成缩小的 JavaScript 文件

因此，如果您尚未安装该插件，请首先通过 CLI 将该插件添加到您的软件包中：

$ npm install grunt-contrib-uglify --save-dev

由于 Gruntfile.js 是一个 JavaScript 文件，您可以使用 new Date() 动态检索当前 date/time 属性来命名新的缩小 JavaScript 文件构造。这可以使用 IIFE（立即调用的函数表达式）获得，它在函数调用 grunt.initConfig().

内将结果文件名值分配给对象键（例如 newJSFileName）

然后您可以在 grunt-text-replace 任务中使用正则表达式来查找先前缩小的文件名：例如

/src=\"js\/mm_[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,4}-[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,2}.min.js\"/g

上面的正则表达式将匹配字符串的任何实例，如下所示。

src="js/mm_10-12-2016-09-38-59.min.js"

来自 index.html 文件中的 <script> 标签。例如

<script type="text/javascript" src="js/mm_10-12-2016-09-38-59.min.js"></script>

注意：此处显示的文件名与我之前 post 中显示的命名约定略有不同，这次它还包括 .min.js 部分之前的秒数。如果 $ grunt 命令在上次执行运行.

后不到一分钟的时间内执行，这将避免出现问题

如果您按如下方式配置 Guntfile.js，这似乎很有效：

module.exports = function (grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        /* CREATE THE FILENAME STRING */
        newJsFileName: (function() {

            // Retrieve the current date and assign parts to variables
            var date = new Date(),
                day = date.getDate(),
                month = date.getMonth() + 1,
                year = date.getFullYear(),
                hour = date.getHours(),
                mins = date.getMinutes(),
                secs = date.getSeconds();

            // Prefix the day value with a zero when less than 10
            if (month < 10) {
                month = '0' + month;
            }

            // Prefix the day value with a zero when less than 10
            if (day < 10) {
                day = '0' + day;
            }

            // Prefix the hour value with a zero when less than 10
            if (hour < 10) {
                hour = '0' + hour;
            }

            // Prefix the minutes value with a zero when less than 10
            if (mins < 10) {
                mins = '0' + mins;
            }

            // Prefix the seconds value with a zero when less than 10
            if (secs < 10) {
                secs = '0' + secs;
            }

            // Concatenate the date properties to form the new
            // filename. E.g. mm_10-12-2016-12-52-05.min.js
            return 'mm_' + month + '-' + day + '-' + year + '-' + hour + '-' + mins + '-' + secs + '.min.js';
        }()),

        /* COPY THE HTML FILE */
        copy: {
            main: {
                files: [{
                    expand: false,
                    src: 'src/index.html',
                    dest: 'dist/index.html'
                }]
            }
        },

        /* MINIFY THE JAVASCRIPT */
        uglify: {
            my_target: {
                files: {
                    // NOTE: The source file here that we're looking for is already minified.
                    // E.g. 'src/js/*.min.js'
                    // however, you will probably want to replace this accordingly as minifying
                    // a file that is already minified seems unecessary.
                    'dist/js/<%= newJsFileName %>': 'src/js/*.min.js' // Destination : Source
                }
            }
        },

        /* REPLACE LINK TO CSS IN HTML FILE */
        replace: {
            javaScriptLink: {
                src: ['./dist/index.html'],
                overwrite: true,
                replacements: [{
                    // UTILIZE A REGULAR EXPRESSION TO FIND THE PREVIOUS MINIFIED FILE NAME STRING
                    // FROM WITHIN THE .HTML FILE
                    from: /src=\"js\/mm_[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,4}-[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,2}.min.js\"/g,
                    // THE NAME OF THE NEW MINIFIED FILE
                    to: 'src="js/<%= newJsFileName %>"'
                }]
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-uglify');    
    grunt.loadNpmTasks('grunt-text-replace');
    grunt.loadNpmTasks('grunt-contrib-copy');

    grunt.registerTask('default', [
        'copy',
        'uglify',
        'replace:javaScriptLink'
    ]);

};

在运行使用上面显示的配置执行 $ grunt 命令之前，您需要确保 index.html 具有 [=20] 的 src 属性=] 标签设置为使用包含附加秒属性的命名约定，否则 Gruntfile.js 中定义的正则表达式将不起作用。例如

<script type="text/javascript" src="js/mm_10-12-2016-09-38-59.min.js"></script>

此外，请确保您的 JavaScript 文件已相应命名。

希望对您有所帮助！

在 grunt 中缩小后自动更改 index.html 中的文件引用

automatically change file reference in index.html after minification in grunt

gruntjs