【问题标题】:Replace require.js script tag via Grunt通过 Grunt 替换 require.js 脚本标签
【发布时间】:2013-10-03 16:53:32
【问题描述】:

我正在开发一个 yeoman 生成器,它基于出色的 webapp 生成器,但处理一些不同的东西。我想要实现的一件事是将 require.js 文件作为一个文件获取。这意味着,而不是这个......

<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>

...我想要这个:

<script scr="scripts/main"></script>

从 require.js,这几乎是不费吹灰之力的。

require.config({
    paths: {
        // ...
        requireLib: '../bower_components/requirejs/require'
    }
});

require(['...', 'requireLib'], function (..., requireLib) {
    // ...
});

我被困在 Gruntfile.js 部分。修改脚本标签的最佳方法是什么,例如是否删除了 data-main 的值作为 src 和 data-main 的新值?

【问题讨论】:

  • 您的 Gruntfile 中当前发生了什么?
  • 它主要是文件yo webapp 会写一些微小的修改,在这里看到它:The Gist...build 任务应该在最后完成标签混搭工作。 .

标签: javascript requirejs gruntjs yeoman


【解决方案1】:

我自己解决了这个问题。使用 grunt-regex-replace:

npm install grunt-regex-replace --save-dev

并在 Gruntfile.js 中执行此操作:

module.exports = function (grunt) {
    // ...
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        // ...
        'regex-replace': {
            dist: {
                src: ['<%= yeoman.dist %>/index.html'],
                actions: [
                    {
                        name: 'requirejs-onefile',
                        search: '<script data-main=".*" src="bower_components/requirejs/require.js"></script>',
                        replace: function(match){
                            var regex = /scripts\/.*main/;
                            var result = regex.exec(match);
                            return '<script src="' + result[0] + '.js"></script>';
                        },
                        flags: 'g'
                    }
                ]
            }
        }
    });
}

运行这个...

grunt regex-replace

...你就完成了。这工作做得很好......

干杯

【讨论】:

  • 很高兴找到这个!在使用 yo webapp 开始一个项目后,我被困在了同一步骤。对于我发现的所有问题,我不确定发电机是否已准备好迎接黄金时段。无论如何,这对我不起作用,因为 uglify 和 rev 任务正在将 main.js 重命名为 [random prefix].main.min.js 之类的东西,所以它不会被脚本拾取。如果我能弄清楚如何获取输出文件的名称,我可以修改它 - 我知道路径,并且在我的配置中只有一个 .js 文件,所以我想我可以搜索它,但这似乎很脆弱。跨度>
猜你喜欢
  • 2018-11-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-12-20
  • 1970-01-01
  • 2018-09-16
相关资源
最近更新 更多