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

2020/10/15 16:21 · javascript ·  · 0评论

我正在尝试将Grunt用作我的Web应用程序的构建工具。

我希望至少有两个设置:

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>

问题是,当我运行如何根据配置使它们咕configuration作响grunt devgrunt prod

还是我朝错误的方向挖掘,总是生成会更容易,MyApp-all.min.js但是将所有脚本(连接的)或从单独文件异步加载这些脚本的加载器脚本放到其中?

你们如何做到?

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

以下是我的摘录Gruntfile.js

ENV设置:

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-preprocessgrunt-env提供的简单性功能:)


2014年1月更新:

受到否决的激励...

当我发布此答案时,Grunt没有太多选择0.4.x可以提供适合我需要的解决方案。现在,几个月后,我想那里还有更多的选择可能比我在这里发布的更好。虽然我仍然亲自使用并乐于使用此技术进行构建,但我要求未来的读者花时间阅读给出的其他答案并研究所有选项。如果您找到更好的解决方案,请在此处发布您的答案。

2014年2月更新:

我不确定这是否会对任何人有帮助,但是我已经在GitHub上创建了这个演示存储库,该存储库使用上面概述的技术显示了完整的(并且更加复杂的设置)。

我已经提出了自己的解决方案。还没有完善,但我想我会朝着这个方向发展。

实质上,我正在使用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>

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

我不喜欢这里的解决方案(包括我先前提供的解决方案),原因如下:

  • 这个问题的投票最高的答案是,你必须手动同步脚本标签的列表,当你添加/重命名/删除JS文件。
  • 可接受答案的问题在于您的JS文件列表不能具有模式匹配。这意味着您必须在Gruntfile中手动进行更新。

我已经弄清楚了如何解决这两个问题。我已经设置了grunt任务,以便每次添加或删除文件时,都会自动生成脚本标签来反映这一点。这样,在添加/删除/重命名JS文件时您无需修改​​html文件或grunt文件。

总结一下它是如何工作的,我有一个带有脚本标记变量的html模板。我使用https://github.com/alanshaw/grunt-include-replace填充该变量。在开发模式下,该变量来自我所有JS文件的浮动模式。添加或删除JS文件时,监视任务会重新计算该值。

现在,要在开发或生产模式下获得不同的结果,只需使用不同的值填充该变量。这是一些代码:

var jsSrcFileArray = [
    'src/main/scripts/app/js/Constants.js',
    'src/main/scripts/app/js/Random.js',
    'src/main/scripts/app/js/Vector.js',
    'src/main/scripts/app/js/scripts.js',
    'src/main/scripts/app/js/StatsData.js',
    'src/main/scripts/app/js/Dialog.js',
    'src/main/scripts/app/**/*.js',
    '!src/main/scripts/app/js/AuditingReport.js'
];

var jsScriptTags = function (srcPattern, destPath) {
    if (srcPattern === undefined) {
        throw new Error("srcPattern undefined");
    }
    if (destPath === undefined) {
        throw new Error("destPath undefined");
    }
    return grunt.util._.reduce(
        grunt.file.expandMapping(srcPattern, destPath, {
            filter: 'isFile',
            flatten: true,
            expand: true,
            cwd: '.'
        }),
        function (sum, file) {
            return sum + '\n<script src="' + file.dest + '" type="text/javascript"></script>';
        },
        ''
    );
};

...

grunt.initConfig({

    includereplace: {
        dev: {
            options: {
                globals: {
                    scriptsTags: '<%= jsScriptTags(jsSrcFileArray, "../../main/scripts/app/js")%>'
                }
            },
            src: [
                'src/**/html-template.html'
            ],
            dest: 'src/main/generated/',
            flatten: true,
            cwd: '.',
            expand: true
        },
        prod: {
            options: {
                globals: {
                    scriptsTags: '<script src="app.min.js" type="text/javascript"></script>'
                }
            },
            src: [
                'src/**/html-template.html'
            ],
            dest: 'src/main/generatedprod/',
            flatten: true,
            cwd: '.',
            expand: true
        }

...

    jsScriptTags: jsScriptTags

jsSrcFileArray是您典型的咕unt文件混淆模式。 jsScriptTags接受jsSrcFileArray并将它们与script两侧的标签连接在一起destPath是我要在每个文件上使用的前缀。

这是HTML的样子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Example</title>

</head>

<body>    
@@scriptsTags
</body>
</html>

现在,正如您在配置中看到的那样,script当它在prod模式下运行时,我会将该变量的值生成为硬编码标签在开发模式下,此变量将扩展为以下值:

<script src="../../main/scripts/app/js/Constants.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Random.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Vector.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/StatsData.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Dialog.js" type="text/javascript"></script>

如果您有任何问题,请告诉我。

PS:对于我想在每个客户端JS应用程序中执行的操作,这是很多代码。我希望有人可以将其变成可重用的插件。也许有一天。

一段时间以来,我一直在问自己同样的问题,并且我认为可以将这个grunt插件配置为执行您想要的操作:https : //npmjs.org/package/grunt-targethtml它实现了依赖于grunt目标的条件html标签。

我一直在寻找一个更简单,直接的解决方案,所以我结合了这个问题的答案:

如何将其他地方放置在gruntfile.js中

并提出了以下简单步骤:

  1. 列出两个版本的索引文件,并将其命名为index-development.html和index-prodoction.html。
  2. 在您的Gruntfile.js的concat / copy块中为index.html文件使用以下逻辑:

    concat: {
        index: {
            src : [ (function() {
                if (grunt.option('Release')) {
                  return 'views/index-production.html';
                } else {
                  return 'views/index-development.html';
                }
              }()) ],
           dest: '<%= distdir %>/index.html',
           ...
        },
        ...
    },
    
  3. 运行“ grunt --Release”以选择index-production.html文件,并保留该标志以获取开发版本。

没有要添加或配置的新插件,也没有新的繁琐任务。

这个名为scriptlinker的繁琐任务看起来像是在开发人员模式下添加脚本的简便方法。您可能首先运行concat任务,然后以prod模式将其指向您的串联文件。

grunt-dom-munger使用CSS选择器读取和处理HTML。例如 从html读取标签。删除节点,添加节点等等。

您可以使用grunt-dom-munger读取由index.html链接的所有JS文件,对其进行丑化处理,然后再次使用grunt-dom-munger来修改index.html以仅链接缩小的JS

我找到了一个名为grunt-dev-prod-switch的grunt插件。它所做的只是基于传递给grunt的--env选项注释掉它所查找的某些块(尽管它限制了您进行开发,生产和测试)。

按照此处的说明进行设置后,即可运行例如:

grunt serve --env=dev,它所做的就是注释掉由

    <!-- env:test/prod -->
    your code here
    <!-- env:test/prod:end -->

它将取消注释被包装的块

    <!-- env:dev -->
    your code here
    <!-- env:dev:end -->

它也可以在javascript上使用,我用它来设置正确的IP地址以连接到我的后端API。块变成

    /* env:dev */
    your code here
    /* env:dev:end */

在您的情况下,它就像这样简单:

<!DOCTYPE html>
<html>
    <head>
        <!-- env:dev -->
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
        <!-- env:dev:end -->
        <!-- env:prod -->
        <script src="js/MyApp-all.min.js" />
        ...
        <!-- env:prod:end -->
    </head>
    <body></body>
</html>

grunt-bake是一个很棒的grunt脚本,在这里非常有用。我在JQM自动构建脚本中使用它。

https://github.com/imaginethepoet/autojqmphonegap

看看我的grunt.coffee文件:

bake:
    resources: 
      files: "index.html":"resources/custom/components/base.html"

这会查看base.html中的所有文件,并吸收它们以创建index.html,非常适合多页应用程序(phonegap)。由于所有开发人员都无法使用一个较长的单页应用程序,因此开发更加轻松(这避免了许多冲突签入)。相反,您可以分解页面并处理较小的代码块,并使用监视命令将其编译为整页。

Bake从base.html读取模板,并在watch上注入组件html页面。

<!DOCTYPE html>

jQuery Mobile演示

app.initialize();

<body>
    <!--(bake /resources/custom/components/page1.html)-->
    <!--(bake /resources/custom/components/page2.html)-->
    <!--(bake /resources/custom/components/page3.html)-->
</body>

您可以更进一步,并在页面中添加“菜单”,“弹出窗口”等内容,这样您就可以将页面真正分成较小的可管理组件。

结合使用wiredep https://github.com/taptapship/wiredep和usemin https://github.com/yeoman/grunt-usemin可以使咕unt声照顾这些任务。Wiredep将一次添加您的依赖项一个脚本文件,而usemin会将它们全部连接到一个文件中以进行生产。然后,只需使用一些html注释即可完成。例如,当我运行时,我的Bower软件包会自动包含并添加到html中bower install && grunt bowerInstall

<!-- build:js /scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->

这个答案不适合新手!

使用Jade模板...将变量传递到Jade模板是沼泽标准用例

我正在使用grunt(grunt-contrib-jade),但您不必使用grunt。只需使用标准的npm jade模块。

如果使用grunt,那么您的gruntfile会喜欢...

jade: {
    options: {
      // TODO - Define options here
    },
    dev: {
      options: {
        data: {
          pageTitle: '<%= grunt.file.name %>',
          homePage: '/app',
          liveReloadServer: liveReloadServer,
          cssGruntClassesForHtmlHead: 'grunt-' + '<%= grunt.task.current.target %>'
        },
        pretty: true
      },
      files: [
        {
          expand: true,
          cwd: "src/app",
          src: ["index.jade", "404.jade"],
          dest: "lib/app",
          ext: ".html"
        },
        {
          expand: true,
          flatten: true,
          cwd: "src/app",
          src: ["directives/partials/*.jade"],
          dest: "lib/app/directives/partials",
          ext: ".html"
        }
      ]
    }
  },

现在,我们可以轻松地在Jade模板中访问grunt传递的数据。

与Modernizr所使用的方法非常相似,我根据传递的变量的值在HTML标记上设置了CSS类,并可以根据是否存在CSS类从那里使用JavaScript逻辑。

如果使用Angular,那就太好了,因为您可以根据类是否存在来执行ng-if在页面中包含元素。

例如,如果存在该类,我可能会包含一个脚本...

(例如,我可能将实时重新加载脚本包含在dev中,但不包含在生产环境中)

<script ng-if="controller.isClassPresent()" src="//localhost:35729/livereload.js"></script> 

考虑processhtml它允许为构建定义多个“目标”。注释用于有条件地从HTML中包含或排除材料:

<!-- build:js:production js/app.js -->
...
<!-- /build -->

变成

<script src="js/app.js"></script>

它甚至声称会做这样的漂亮事情(请参阅README):

<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->

<!-- class is changed to 'production' only when the 'dist' build is executed -->
<html class="production">
本文地址:http://javascript.askforanswer.com/ranggruntweibutongdeshezhishengchengindex-html.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!