如何在 Grunt LESS 任务选项中的横幅后添加换行符

How to add line break after banner inside Grunt LESS task options

我正在为一个新的 WordPress 项目设置 gruntfile.js,我将在其中使用 LESS 来管理 CSS。

我在这里想要完成的是添加有关主题的典型信息列表,您可以在 WordPress 主题中的每个 style.css 文件的顶部看到。这是我用于 LESS 任务的代码:

less: {
  development: {
    options: {
      compress: true,
      banner: '/*!\n' +
        'Theme Name: <%= pkg.name %>\n' +
        'Theme URI: <%= pkg.url %>\n' +
        'Author: <%= pkg.author.name %>\n' +
        'Author URI: <%= pkg.author.website %>\n' +
        'Description: <%= pkg.description %>\n' +
        'Version: <%= pkg.version %>\n' +
        '*/' +
        '\n'
    },
    files: {
      'css/myfile-build.min.css': 'less/myfile.less'
    }
  }
}

使用上面的代码我可以得到这个结果:

/*!
Theme Name: nameofthewptheme
Theme URI: #
Author: Vincenzo Coppolecchia
Author URI: #
Description: Description for the theme goes here.
Version: 0.1.0
*/@font-face{...}...

问题

如您所见,有两个(小)问题:

  1. 在评论结束标记之后我有我的 CSS,所以我猜最后一个换行符根本没有被考虑;
  2. 评论开头有感叹号(!)。

任何帮助将不胜感激。

我是如何解决这个问题的

我通过使用另一个名为 grunt-banner 的 Grunt 任务以不同的方式自己解决了这个问题:基本上这个任务所做的就是添加横幅,这正是我所需要的。

在我的 Gruntfile.js 文件中,定义了 less 任务的地方我删除了横幅选项

less: {
  development: {
    options: {
      compress: true
    },
    files: {
      'css/myfile-build.min.css': 'less/myfile.less'
    }
  }
}

相反,我以这种方式使用了上面提到的任务:

banner: '/*!\n' +
        'Theme Name: <%= pkg.name %>\n' +
        'Theme URI: <%= pkg.url %>\n' +
        'Author: <%= pkg.author.name %>\n' +
        'Author URI: <%= pkg.author.website %>\n' +
        'Description: <%= pkg.description %>\n' +
        'Version: <%= pkg.version %>\n' +
        '*/',
usebanner: {
    taskName: {
        options: {
            position: 'top',
            banner: '<%= banner %>',
            linebreak: true
            },
        files: {
            src: 'global.min.css'
        }
    }
}

使用的选项

  • position 这会设置您想要发表大量评论的位置。
  • banner 当然,这是您添加横幅内容的地方。
  • linebreak 这里你在内容和横幅之间添加一个换行符。

我最后的(个人)考虑

我想这是解决我的问题的一种方法,因为 less 任务并没有证明自己根本不起作用,但它无法生成我想要的确切结果:格式正确的 WordPress横幅。