问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

让 Grunt 为不同的设置生成 index.html

社区维基
1
新手上路，请多包涵

我正在尝试使用 Grunt 作为我的网络应用程序的构建工具。

我想至少有两个设置：

I. 开发设置- 从单独的文件加载脚本，不串联，

所以我的 index.html 看起来像：

 <!DOCTYPE html>
<html>
    <head>
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
    </head>
    <body></body>
</html>

二。生产设置- 加载我的脚本缩小并连接在一个文件中，

相应地使用 index.html：

 <!DOCTYPE html>
<html>
    <head>
        <script src="js/MyApp-all.min.js" />
    </head>
    <body></body>
</html>

问题是， 当我运行 grunt dev 或 grunt prod 时，我如何根据配置制作这些 index.html？

或者也许我在错误的方向上挖掘并且总是生成 MyApp-all.min.js 会更容易，但将我的所有脚本（连接）或从单独文件异步加载这些脚本的加载器脚本放入其中？

伙计们，你们是怎么做到的？

原文由 Dmitry Pashkevich 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptbuildbuild-automationgruntjs
阅读 307
2 个回答
得票最新
社区维基
1
✓ 已被采纳

我想出了我自己的解决方案。还没有完善，但我想我会朝着那个方向前进。

本质上，我正在使用 grunt.template.process() 生成我的 index.html 从分析当前配置并生成我的原始源文件列表或链接到带有缩小代码的单个文件的模板.下面的示例适用于 js 文件，但同样的方法可以扩展到 css 和任何其他可能的文本文件。

grunt.js :

 /*global module:false*/
module.exports = function(grunt) {
    var   // js files
        jsFiles = [
              'src/module1.js',
              'src/module2.js',
              'src/module3.js',
              'src/awesome.js'
            ];

    // Import custom tasks (see index task below)
    grunt.loadTasks( "build/tasks" );

    // Project configuration.
    grunt.initConfig({
      pkg: '<json:package.json>',
      meta: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },

      jsFiles: jsFiles,

      // file name for concatenated js
      concatJsFile: '<%= pkg.name %>-all.js',

      // file name for concatenated & minified js
      concatJsMinFile: '<%= pkg.name %>-all.min.js',

      concat: {
        dist: {
            src: ['<banner:meta.banner>'].concat(jsFiles),
            dest: 'dist/<%= concatJsFile %>'
        }
      },
      min: {
        dist: {
        src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
        dest: 'dist/<%= concatJsMinFile %>'
        }
      },
      lint: {
        files: ['grunt.js'].concat(jsFiles)
      },
      // options for index.html builder task
      index: {
        src: 'index.tmpl',  // source template file
        dest: 'index.html'  // destination file (usually index.html)
      }
    });

    // Development setup
    grunt.registerTask('dev', 'Development build', function() {
        // set some global flags that all tasks can access
        grunt.config('isDebug', true);
        grunt.config('isConcat', false);
        grunt.config('isMin', false);

        // run tasks
        grunt.task.run('lint index');
    });

    // Production setup
    grunt.registerTask('prod', 'Production build', function() {
        // set some global flags that all tasks can access
        grunt.config('isDebug', false);
        grunt.config('isConcat', true);
        grunt.config('isMin', true);

        // run tasks
        grunt.task.run('lint concat min index');
    });

    // Default task
    grunt.registerTask('default', 'dev');
};

index.js (the index task) ：

 module.exports = function( grunt ) {
    grunt.registerTask( "index", "Generate index.html depending on configuration", function() {
        var conf = grunt.config('index'),
            tmpl = grunt.file.read(conf.src);

        grunt.file.write(conf.dest, grunt.template.process(tmpl));

        grunt.log.writeln('Generated \'' + conf.dest + '\' from \'' + conf.src + '\'');
    });
}

最后， index.tmpl ，包含生成逻辑：

 <doctype html>
<head>
<%
    var jsFiles = grunt.config('jsFiles'),
        isConcat = grunt.config('isConcat');

    if(isConcat) {
        print('<script type="text/javascript" src="' + grunt.config('concat.dist.dest') + '"></script>\n');
    } else {
        for(var i = 0, len = jsFiles.length; i < len; i++) {
            print('<script type="text/javascript" src="' + jsFiles[i] + '"></script>\n');
        }
    }
%>
</head>
<html>
</html>

更新。 发现基于 grunt 的 Yeoman 有一个内置的 usemin 任务，它与 Yeoman 的构建系统集成。它根据 index.html 开发版本中的信息以及其他环境设置生成 index.html 的生产版本。有点复杂，但看起来很有趣。

原文由 Dmitry Pashkevich 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

我最近发现了这些 Grunt v0.4.0 兼容任务：

围绕预处理 npm 模块的 Grunt 任务。

为未来的任务自动配置环境的 Grunt 任务。

以下是我的 Gruntfile.js 的片段。

环境设置：

 env : {

    options : {

        /* Shared Options Hash */
        //globalOption : 'foo'

    },

    dev: {

        NODE_ENV : 'DEVELOPMENT'

    },

    prod : {

        NODE_ENV : 'PRODUCTION'

    }

},

预处理：

 preprocess : {

    dev : {

        src : './src/tmpl/index.html',
        dest : './dev/index.html'

    },

    prod : {

        src : './src/tmpl/index.html',
        dest : '../<%= pkg.version %>/<%= now %>/<%= ver %>/index.html',
        options : {

            context : {
                name : '<%= pkg.name %>',
                version : '<%= pkg.version %>',
                now : '<%= now %>',
                ver : '<%= ver %>'
            }

        }

    }

}

任务：

 grunt.registerTask('default', ['jshint']);

grunt.registerTask('dev', ['jshint', 'env:dev', 'clean:dev', 'preprocess:dev']);

grunt.registerTask('prod', ['jshint', 'env:prod', 'clean:prod', 'uglify:prod', 'cssmin:prod', 'copy:prod', 'preprocess:prod']);

在 /src/tmpl/index.html 模板文件中（例如）：

 <!-- @if NODE_ENV == 'DEVELOPMENT' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="../src/js/foo1.js"></script>
    <script src="../src/js/foo2.js"></script>
    <script src="../src/js/jquery.blah.js"></script>
    <script src="../src/js/jquery.billy.js"></script>
    <script src="../src/js/jquery.jenkins.js"></script>

<!-- @endif -->

<!-- @if NODE_ENV == 'PRODUCTION' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="http://cdn.foo.com/<!-- @echo name -->/<!-- @echo version -->/<!-- @echo now -->/<!-- @echo ver -->/js/<!-- @echo name -->.min.js"></script>

<!-- @endif -->

我确信我的设置与大多数人不同，以上内容的用处将取决于您的情况。对我来说，虽然它是一段很棒的代码，但 Yeoman grunt-usemin 比我个人需要的更健壮。

注意： 我今天 刚刚 发现上面列出的任务，所以我可能会缺少一个功能和/或我的过程可能会改变。现在，我喜欢 grunt-preprocess 和 grunt-env 所提供的简单性 和 特性。 :)

我不确定它是否对任何人有帮助，但我已经 在 GitHub 上创建了这个演示存储库， 它使用我上面概述的技术显示了一个完整的（和更复杂的设置）。

原文由 mhulse 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题