2

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

我在这里要完成的是添加有关主题的典型信息列表，您可以在style.cssWordPress 主题中的每个文件的顶部看到。这是我用于 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. 在评论的开头有一个感叹号（！）。

任何帮助都感激不尽。

4

1 回答 1

3

我是如何解决这个问题的

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

在我的Gruntfile.js文件中，定义了较少的任务，我删除了横幅选项

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 横幅。

于 2015-11-22T16:33:35.360 回答