我试图使用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>

2生产设置-加载我的脚本缩小和连接在一个文件,

根据index.html:

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

问题是,当我运行grunt dev或grunt prod时,我如何让grunt根据配置创建这些index.html ?

或者也许我在错误的方向上挖掘,它会更容易总是生成MyApp-all.min.js,但把它里面要么我所有的脚本(连接)或加载器脚本异步加载这些脚本从单独的文件?

你们是怎么做到的,伙计们?


当前回答

我已经有了自己的解决办法。还没有完善,但我想我会朝着那个方向发展。

从本质上讲,我使用了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(索引任务):

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 + '\'');
    });
}

最后,指数。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>

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

其他回答

我已经有了自己的解决办法。还没有完善,但我想我会朝着那个方向发展。

从本质上讲,我使用了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(索引任务):

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 + '\'');
    });
}

最后,指数。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>

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

我一直在问自己同样的问题,我认为这个grunt插件可以配置成你想要的:https://npmjs.org/package/grunt-targethtml。它实现了条件html标记,依赖于grunt目标。

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

grunt-preprocess

围绕npm模块预处理任务。

咕噜��

为将来的任务自动化环境配置的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比我个人需要的更健壮。

注意:我今天才发现上面列出的任务,所以我可能会错过一个功能和/或我的流程可能会改变。现在,我很喜欢咕噜预处理和咕噜env所提供的简单性和特性。:)


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

这个名为scriptlinker的任务看起来是在开发模式中添加脚本的简单方法。您可以先运行连接任务,然后以prod模式将其指向连接的文件。

我发现了一个叫咕哝-dev-prod-switch的插件。它所做的只是根据您传递给grunt的——env选项注释掉它所寻找的某些块(尽管它将您限制为dev、prod和test)。

一旦你设置好它,你可以运行,例如:

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>