Question

我试图用Grunt，usemin 2，requirejs和uglify来解决问题。我在我的构建中观察到的是，requirejs没有正确地将我的依赖项包含到我的单个连接构建文件中。当我从/ dist运行index.html时，我在查找＆＃39; jquery＆＃39;，＆＃39; app＆＃39;和某些第三方js文件或有时＆＃34; define时看到错误定义＆＃34;

我在grunt-usemin上阅读了以下问题并删除了需要的块，但有些问题仍然存在于这些线程中。

我跟进了我的搜索并遇到了这篇文章How to integrate Yeoman and Requirejs，当我从使用grunt-contrib-requirejs变为grunt-requirejs时，我看到了Requirejs优化器正在运行。不幸的是，我仍然看到这些错误：

Uncaught ReferenceError: define is not defined.

我的index.html中有以下内容：

<!-- build:js js/main.js -->
    <script src="bower_components/requirejs/require.js"></script>
    <script src="js/main.js"></script>
<!-- endbuild -->

以下是我的Grunt文件：http://jsbin.com/futocusu/3/edit?js

关于在这个主题上创建一篇关于使用Yeoman的文章，有关于＃112的讨论，但我认为它还没有写过。

有没有人想出使用usemin v2与grunt和requirejs在构建时输出到单个concat + uglify文件的最佳方法？我也不确定使用grunt-contrib-requirejs和grunt-requirejs以及何时使用哪一个有什么区别。

Answer 1

看起来好像你正在尝试用main.js做太多。

我在 Gruntfile.js

中有以下构建任务

grunt.registerTask('build', [
        'copy', // copies the src directory to dist (htdocs)
        'requirejs', // do an r.js build to concat modular dependencies
        'concat:head', // concats js in the head
        'uglify:head', // compresses js in the head
        'uglify:foot', // compresses js in the foot
        'cssmin', // minifies and concats css
        'usemin', // runs through html and inputs minified js and css
        'clean:afterBuild' // deletes files that are not required for build
    ]);

以下是每个相关的Grunt任务（对我而言，这些任务存储在单独的文件中，因为我使用的是load-grunt-config）。如果你想在你的gruntfile中使用它们，那么你需要做的就是获取返回对象中的所有内容并将其粘贴到你的gruntfile中的任务值中：

复制

module.exports = function (grunt, options) { return { main: { cwd: 'src/', src: '**', dest: 'dist/', expand: true, flatten: false }, }; };

<强> requirejs

module.exports = function(grunt, options) { return { compile: { options: { appDir: "src/to/require/app", baseUrl: "./", mainConfigFile: "src/to/require/app/common", dir: "dist/to/require/app", // build a common layer modules: [ { "name": "common" } ] } } }; };

<强>的concat

module.exports = function (grunt, options) { return { head: { /* other stuff */ }, foot: { src: [ 'dist/to/require/app/some_other_js.js', 'dist/to/require/app/external/require.js', 'dist/to/require/app/external/require.text.js', 'dist/to/require/app/common.js' ], dest: 'src/to/require/app/compiled_footer_js.js', } }; };

<强>丑化

module.exports = function (grunt, options) { return { head: { /* other stuff * }, foot: { files: { 'src/to/require/app/compiled_footer_js.min.js': ['src/to/require/app/compiled_footer_js.js'] } } }; };

usemin

module.exports = function (grunt, options) { return { html: [ 'src/path/to/index.html' ] }; };

如何使用yeoman，grunt，usemin 2和requirejs？

1 个答案: