我在我的项目中使用grunt文件。在这个文件中，我想添加一个过程，在该过程中，它将能够用index.html中的新文件替换先前的缩小文件引用。
我正在缩小名称和日期/时间的文件，例如 mm_10 / 11 / 2016_5：00.min.js 缩小后的时间将会改变 mm_10 / 11 / 2016_6： 30.min.js 即可。但索引页面有前一个文件，即 mm_10 / 11 / 2016_5：00.min.js 。所以我想用 mm_10 / 11 / 2016_6：30.min.js 替换 mm_10 / 11 / 2016_5：00.min.js 。 请帮助我
感谢
答案 0 :(得分：1)
要使此流程动态化，您可以考虑配置您的grunt $ npm install grunt-contrib-uglify --save-dev以使用grunt-contrib-uglify生成缩小的JavaScript文件
首先，如果您尚未安装该插件，请先通过CLI将该插件添加到您的软件包中：
Gruntfile.js
由于new Date()是一个JavaScript文件，您可以动态检索当前日期/时间属性，以便使用newJSFileName构造命名新的缩小JavaScript文件。这可以使用IIFE（立即调用函数表达式）获得，它将函数文件名值分配给函数调用grunt.initConfig()内的对象键（例如grunt-text-replace）。
然后，您可以在/src=\"js\/mm_[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,4}-[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,2}.min.js\"/g任务中使用正则表达式来查找先前缩小的文件名：例如
src="js/mm_10-12-2016-09-38-59.min.js"
上面的正则表达式将匹配字符串的任何实例，如下所示。
<script>
index.html文件中的<script type="text/javascript" src="js/mm_10-12-2016-09-38-59.min.js"></script>标记的。 E.g。
.min.js
注意：此处显示的文件名与我上一篇文章中的命名约定略有不同，这次它还包括$ grunt部分之前的秒数。如果Guntfile.js命令在上次运行的持续时间不到一分钟的时间内执行，这将避免出现问题。
如果您按照以下方式配置module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/* CREATE THE FILENAME STRING */
newJsFileName: (function() {
// Retrieve the current date and assign parts to variables
var date = new Date(),
day = date.getDate(),
month = date.getMonth() + 1,
year = date.getFullYear(),
hour = date.getHours(),
mins = date.getMinutes(),
secs = date.getSeconds();
// Prefix the day value with a zero when less than 10
if (month < 10) {
month = '0' + month;
}
// Prefix the day value with a zero when less than 10
if (day < 10) {
day = '0' + day;
}
// Prefix the hour value with a zero when less than 10
if (hour < 10) {
hour = '0' + hour;
}
// Prefix the minutes value with a zero when less than 10
if (mins < 10) {
mins = '0' + mins;
}
// Prefix the seconds value with a zero when less than 10
if (secs < 10) {
secs = '0' + secs;
}
// Concatenate the date properties to form the new
// filename. E.g. mm_10-12-2016-12-52-05.min.js
return 'mm_' + month + '-' + day + '-' + year + '-' + hour + '-' + mins + '-' + secs + '.min.js';
}()),
/* COPY THE HTML FILE */
copy: {
main: {
files: [{
expand: false,
src: 'src/index.html',
dest: 'dist/index.html'
}]
}
},
/* MINIFY THE JAVASCRIPT */
uglify: {
my_target: {
files: {
// NOTE: The source file here that we're looking for is already minified.
// E.g. 'src/js/*.min.js'
// however, you will probably want to replace this accordingly as minifying
// a file that is already minified seems unecessary.
'dist/js/<%= newJsFileName %>': 'src/js/*.min.js' // Destination : Source
}
}
},
/* REPLACE LINK TO CSS IN HTML FILE */
replace: {
javaScriptLink: {
src: ['./dist/index.html'],
overwrite: true,
replacements: [{
// UTILIZE A REGULAR EXPRESSION TO FIND THE PREVIOUS MINIFIED FILE NAME STRING
// FROM WITHIN THE .HTML FILE
from: /src=\"js\/mm_[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,4}-[0-9]{1,2}-[0-9]{1,2}-[0-9]{1,2}.min.js\"/g,
// THE NAME OF THE NEW MINIFIED FILE
to: 'src="js/<%= newJsFileName %>"'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', [
'copy',
'uglify',
'replace:javaScriptLink'
]);
};
，这似乎很有效：
$ grunt在使用上面显示的配置运行index.html命令之前，您需要确保src设置了<script>标记的Gruntfile.js属性以使用包含额外秒属性的命名约定，否则<script type="text/javascript" src="js/mm_10-12-2016-09-38中定义的正则表达式将不起作用。 E.g。
.min.js"></script>的 -59 {{1}}
另外，请确保相应地命名您的JavaScript文件。
希望这有帮助！