如何在 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{...}...
问题
如您所见,有两个(小)问题:
- 在评论结束标记之后我有我的 CSS,所以我猜最后一个换行符根本没有被考虑;
- 评论开头有感叹号(!)。
任何帮助将不胜感激。
我是如何解决这个问题的
我通过使用另一个名为 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横幅。
我正在为一个新的 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{...}...
问题
如您所见,有两个(小)问题:
- 在评论结束标记之后我有我的 CSS,所以我猜最后一个换行符根本没有被考虑;
- 评论开头有感叹号(!)。
任何帮助将不胜感激。
我是如何解决这个问题的
我通过使用另一个名为 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横幅。