标签: grunt-contrib-requirejs

我正在尝试使用插件优化RequireJS使用.GruntJSgrunt-contrib-requirejs

问题是我的代码在优化它之前工作正常,然后在优化它之后,它在控制台上说Uncaught ReferenceError: define is not defined.

这是 Gruntfile.js

module.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-contrib-requirejs');

  grunt.initConfig({
    requirejs: {
        compile : {
            options : {
              name  : 'main',
              baseUrl : ".",
              mainConfigFile : "./main.js",
              out : "./optimized.js",
              preserveLicenseComments: false
           }
        }
}
  })

  grunt.registerTask('default', 'requirejs');

}

我怎样才能使用grunt-contrib-requirejs配置或甚至r.js配置来不缩小特定文件.

我可以通过选项禁用所有文件的缩小optimize: 'none'.但我不知道如何为单个文件禁用它.

  options: {                                        
      // Do not minify these files: 
      // 'jquery'
      optimize: 'none', // disables minification for all files
    }

我仍然希望文件包含在最终的合并文件中(与empty: http://requirejs.org/docs/optimization.html#empty不同),只是没有传递给uglify.js

项目介绍

我的项目是单页店面.该项目有多个模块,每个模块包含一组controller.js,view.js和model.js文件,以及template.html文件.并使用requirejs来管理依赖项.

问题陈述

我想使用mainConfigFile来提供grunt-requirejs中引用模块的路径.我的mainConfigFile的一部分require.config存储在单独的文件(base.dependency.config)中,而require.config.paths在运行时由下划线拼接在一起.

base.dependency.config

config = {
    baseDependencyConfig: {
        paths: { ... }
        shim: { ... }
    }
}

main.js

var dependencies = config.baseDependencyConfig;
var basePaths = config.baseDependencyConfig.paths;
var extensionPaths = {
    // extra sets of paths
};

// combine base paths and extension paths at runtime using underscore
var dependencyPaths = _.extend(basePaths, extensionPaths);

dependencies.paths = dependencyPaths;
require.config(dependencies);

// application startup
require(['app', 'eventbus']) {
    // code
}

错误

但是,grunt requirejs忽略了mainConfigFile,grunt requirejs尝试在root下找到'app.js',实际上,'app'在require.config路径下定义为

'app': 'modules/base/app/base.app.controller'

我的gruntFile:

module.exports = function (grunt) { …

我正在使用Grunt构建Durandal入门套件专业版.

这一切都很好,除了一个小细节.我想app-config从优化器中排除一个文件(下面),并在构建完成后将其保存为非缩小文件.

根据其他SO线程建议,我目前正在使用empty:它,将其从预期的优化文件中删除.但是,当我打开构建的项目时,我在控制台中收到错误:

Uncaught Error: main missing app-config

options: {
    name: '../lib/require/almond-custom',
    baseUrl: requireConfig.baseUrl,
    mainPath: 'app/main',
    paths: mixIn({ }, requireConfig.paths, { 
         'almond': 'lib/require/almond-custom', 
         'app-config': 'empty:' 
    }),
    optimize: 'none',
    out: 'build/app/main.js',
    preserveLicenseComments: false
}

杏仁是问题吗？我尝试使用它将其切换到完整的requirejs include: ['path/to/require'],但没有成功.

如果你想在本地重现它,你可以从上面的链接下载入门套件,或者使用一个稍微可配置的版本,这更接近我的例子.只需npm install在文件夹中运行一个就可以了.

我有这样的结构:

• 应用
  • 脚本
    • 库
      • 的jquery.js
      • bootstrap.js
      • moment.js
    • app.js
    • vendor.js
    • common.js
    • app.config.js
    • main.js #require config

注意vendor.js只是一个包含libs下所有文件的文件.防爆

//vendor.js define(['jquery','bootstrap', 'moment'], function(){});

只是列出依赖项:

• app.js取决于common.js和app.config.js
• common.js 依赖于取决于 vendor.js
• app.config.js 依赖于取决于 moment.js

我正在试图做的是运行咕噜requirejs命令来创建一个vendor.js与下的所有文件的文件libs/和app.js与不包括在文件的其余部分vendor.js.

这是我的requirejs选项的样子:

module.exports = function (grunt) {
    'use strict';
    var config = {
        dist: {
            options: {
                appDir: 'app/',
                baseUrl: './scripts',
                mainConfigFile: 'app/scripts/main.js',
                dir: 'dist/scripts/',
                modules: [
                    { name: 'vendor'},
                    { name: 'app', exclude: ['vendor'] }
                ]
            }
        }
    };
    grunt.config('requirejs', …

我使用requirejs并配置我的产品工件,因此组合我的库并在它们之间设置模块依赖关系以使用requirejs的grunt任务获得适当的加载序列.在我的livereload服务器中使用运行时模块注入没有问题,它可以访问非组合库.为了清楚起见,我禁用了所有缩小/丑化并开启了js-beautify.

    requirejs: {
        dist: {
            // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js
            options: {
                // `name` and `out` is set by grunt-usemin
                // name: 'App',
                baseUrl: yeomanConfig.app + '/scripts',
                mainConfigFile: yeomanConfig.app + '/scripts/config.js',
                out: yeomanConfig.dist + '/scripts/main.js',
                optimize: 'none',
                // TODO: Figure out how to make sourcemaps work with grunt-usemin
                // https://github.com/yeoman/grunt-usemin/issues/30
                //generateSourceMaps: true,
                // required to support SourceMaps
                // http://requirejs.org/docs/errors.html#sourcemapcomments
                beautify: false,
                removeCombined: false,
                generateSourceMaps: false,
                preserveLicenseComments: false,
                useStrict: true,
                mangle: false,
                compress: false,
                // wrap: true,
                // https://github.com/mishoo/UglifyJS2
            }
        }
    },

我正在使用Kendo,Angular和Angular-Keno-UI.我知道Kendo是AMD模块就绪,但它看起来不像Angular-Keno-UI.我期望创建一个垫片并将其包装在相应的requirejs …

我想使用Grunt建立一个Durandal项目,因为Weyland完全没有文档记录,并不像Grunt那样标准.

为此,grunt任务需要在优化期间引入所有js和html文件,但我无法通过文本模块让RequireJS内联html文件.

看起来weyland 手动复制文本文件,但我无法弄清楚它是如何让requirejs(或杏仁,在这种情况下)实际使用它们.我已经看到了这个问题,但它需要在define调用中引用文本模块,这在Durandal中没有完成.

我的for gruntfile使用此配置

requirejs: {
            build: {
                options: {                  
                    name: '../lib/require/almond-custom', //to deploy with require.js, use the build's name here instead
                    insertRequire: ['main'], //needed for almond, not require
                    baseUrl: 'src/client/app',
                    out: 'build/main-built.js',
                    mainConfigFile: 'src/client/app/main.js', //needed for almond, not require
                    wrap: true, //needed for almond, not require
                    paths: {
                        'text': '../lib/require/text',
                        'durandal':'../lib/durandal/js',
                        'plugins' : '../lib/durandal/js/plugins',
                        'transitions' : '../lib/durandal/js/transitions',
                        'knockout': '../lib/knockout-2.3.0',
                        'bootstrap': '../lib/bootstrap.min',
                        'jquery': '../lib/jquery-1.9.1',
                        'Q' : '../lib/q.min'
                    },
                    inlineText: true,
                    optimize: 'none',
                    stubModules: …

我正在使用配置angularjs项目依赖 requirejs

以下是配置

"cornerstone-core":"emp/cornerstone.min",
"cornerstone-math":"emp/cornerstoneMath.min",
"hammer":"emp/hammer.min",
"properties":"emp/properties"
"clientParameters":"emp/clientParameters"
"cornerstone":"emp/cornerstone"
"cornerstoneMath":"emp/cornerstoneMath"
"cornerstoneTools":"emp/cornerstoneTools"
"cornerstoneWADOImageLoaderCodecs":"emp/cornerstoneWADOImageLoaderCodecs"
"cornerstoneWADOImageWebWorker":"emp/cornerstoneWADOImageWebWorker"
"myApp":"emp/myApp"

运行时依赖项是,

clientParameters : [ "properties" ],
cornerstoneMath : [ "properties", "clientParameters", "cornerstone-core", "cornerstone-math", "hammerjs" ]
cornerstone : [ "properties", "clientParameters", "cornerstone-core", "cornerstone-math", "hammerjs" ],
cornerstoneTools : [ "properties", "clientParameters", "cornerstone-core", "cornerstone-math", "hammerjs" ],
myApp : [ "properties", "clientParameters", "cornerstone", "cornerstoneMath", "cornerstone-core", "cornerstone-math", "hammerjs" ]

在cornerstone.js中,我按以下方式加载模块,

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' …

我使用r.js将jsSPA中的所有代码拼凑成1个文件.我使用grunt的`grunt-contrib-requirejs'任务,具体如下:

requirejs: {
  compile: {
    options: {
      name: 'app',
      out: 'build/js/app.js',
      baseUrl: 'app',
      mainConfigFile: 'config/main.js',
      preserveLicenseComments: true,
      optimize: "none"
    }
  }
}

我还使用构建任务将构建文件夹压缩成zip文件,以便发送给我们公司的变更管理人员.

我想有两个requirejs任务 - 一个uglifies(用于发送到CM)和一个没有(在开发期间).这可能吗？我尝试用不同的名字创建一个新任务,咕噜咕噜地叫着我......应该很简单.这可能吗？有没有理由不这样做？

提前致谢!

在我的项目目录中,我使用以下命令安装了Grunt:

npm install grunt

...之后我在我的项目目录中执行了Grunt服务器,但它给了我命令not found error.

Raj$ grunt server
-bash: grunt: command not found

和:

npm install grunt
npm WARN package.json BID-2.0@0.0.0 No description
npm WARN package.json BID-2.0@0.0.0 No repository field.
npm WARN package.json BID-2.0@0.0.0 No README data

我该如何解决？

我已经挣扎了好几天才想出来,但最后我今天需要你的帮助.
我的回购:https://github.com/seoyoochan/bitsnut-web

我想要实现的目标:
- 加载和优化r.js - 为RequireJS和r.js编写凉亭任务:
   任务是:对RequireJS进行minify &uglify&concatenation,并在生产时使用r.js进行优化
- 如何排除js脚本标签在index.html使用wiredep任务并通过RequireJS加载器加载它们时？

我使用Yeoman'Webapp'生成器并生成了脚手架应用程序.

我安装骨干,提线木偶,文本,下划线和等经bower install 我修改bower.json通过删除dependencies只留下"requirejs": "~2.1.16"上dependencies.(devDependencies是空的)

因为我用的[2][grunt-wiredep],一切都自动加载bower_components到index.html.我修改.bowerrc了存储依赖项app/scripts/vendor.

但是,问题是我不知道如何通过ReuqireJS成功加载它们而不是将供应商作为脚本标签加载到里面index.html.我必须为RequireJS和r.js编写一些任务,但不知道如何实现这个目标(grunt-contrib-requirejs虽然我安装了)

我想跟着4的方法来利用r.js在https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module.但我遇到的问题是RequireJS的文档建议不要使用named module,但是anonymous module.我想听听关于我应该如何处理的各种意见.

我非常感谢你的帮助!