Yeoman 构建流程

Question

我目前正在使用非常喜欢的Yeoman。我有一个任务要完成，就是获取我的Angular应用程序并使其无服务器化。基本上这意味着获取所有模板并将它们插入到index.html文件中，使用
标签。

<script type="text/ng-template" id="dir to template"> ..template html goes here </script>

现在yeoman有它自己的gruntfile，而我对Grunt完全是新手，所以我想知道：
a）这个任务是否应该由grunt处理？
b）我应该调整现有的grunt文件还是创建一个新的？
c）有什么好的意见可以告诉我如何做到这一点的文档？

谢谢！

- climboid

Answer 1

我们正在努力使Yeoman更易于定制，但与此同时，您可以通过在Gruntfile中添加以下内容来覆盖build任务：

grunt.registerTask('build', [
  'clean',
  'jshint',
  'test',
  'compass',
  'useminPrepare',
  'concat',
  'cssmin',
  'uglify',
  'copy',
  'rev',
  'usemin'
]);

grunt.renameTask('build', 'oldbuild');
grunt.registerTask('build', 'your-task oldbuild');

这将让您在构建过程中添加任何您想要的任务。

---

如果您想进一步自定义，可以覆盖build，并从yeoman提供的任务中拼凑出您需要的内容：usemin-handler rjs concat css min img rev usemin manifest html。

例如：

grunt.registerTask('build', 'your-task rjs concat css whatever-you-want');

- Sindre Sorhus

Answer 2

目前还无法定制Yeoman构建过程。但是你可以使用这个解决办法。将以下代码复制到你自己的Gruntfile中：

// Clobber the original targets
var targets = {
    // Add as many custom targets as you want, using custom modules, etc.

    // Keep the existing targets
    default   : '               rjs concat css min img rev usemin manifest',
    usemin    : 'usemin-handler rjs concat css img rev usemin manifest',
    text      : 'usemin-handler rjs concat css min     rev usemin manifest',
    buildkit  : 'usemin-handler rjs concat css min img rev usemin manifest html:buildkit',
    basics    : 'usemin-handler rjs concat css min img rev usemin manifest html:basics',
    minify    : 'usemin-handler rjs concat css min img rev usemin manifest html:compress',
    test      : 'usemin-handler rjs concat css img rev usemin manifest',

    yourbuild : 'intro clean mkdirs rjs'
};

// If we clobber targets, we have to rebuild targetList, the below is copy paster from Yeoman.js
var targetList = grunt.log.wordlist(Object.keys(targets));

// We also have to rebuild the build task with the new targetList
grunt.registerTask('build', 'Run a predefined target - build:<target> \n' + targetList,  function(target) {
    var valid = Object.keys(targets);
    target = target || 'usemin';

    if ( valid.indexOf( target ) === -1 ) {
        grunt.log
        .error('Not a valid target')
        .error(grunt.helper('invalid targets', targets));
        return false;
    }

    var tasks = ['intro', 'clean coffee compass mkdirs', targets[target], 'copy time'].join(' ');

    // Now overwrite the task for our costume build
    if( target === 'yourbuild') {
        tasks = targets[target];
    }

    // Conditionally remove compass / manifest task if either compass or
    // phantomjs binary is missing. Done only for `test` target (specifically
    // used for our `npm test`). For each, output warning infos.
    if( target === 'test' ) {
        tasks = grunt.helper( 'build:skip', tasks, 'compass' );
        tasks = grunt.helper( 'build:skip', tasks, 'phantomjs', 'manifest' );
    }

    grunt.log.subhead('Running ' + target + ' target')
    .writeln('  - ' + grunt.log.wordlist(tasks.split(' '), { separator: ' ' }));

    grunt.task.run(tasks);
});

现在，您可以更改以下行以定制自己的构建过程：

yourbuild : 'intro clean mkdirs rjs'

但请记住，这段代码是从yeoman源代码中复制而来的，如果有更新，您必须自己进行相应的更新。

- netzzwerg

---

哇，这真是太棒了。非常感谢netzzwerg，帮助超级有用。 - climboid

复制内部代码并不是解决问题的方法，而且在未来某个时候肯定会破坏你的代码。我已经更新了我的答案，以反映另一种可以实现相同效果的方法。 - Sindre Sorhus