我使用grunt任务观看和连接某些js文件。
我的第一个配置工作正常:
grunt.initConfig({
watch: {
js: {
files: ['web/**/*.js'],
tasks: ['concat:JS']
}
},
concat: {
JS: {
files: {
"index.js": [
"test-1.js",
"test-2.js",
],
"about_us.js": [
"test-3.js",
"test-4.js",
],
"store.js": [
"test-5.js",
"test-6.js",
]
}
}
}
});
我的问题是,每当我更改文件时,使用此配置它会连接所有内容。
我可以仅连接特定文件(根据更改的文件)。
e.g。如果我改变test-1.js
我想只连接index.js
文件(..所以要运行的任务应该是'concat:JS:index.js'
)
因此我尝试添加观看活动
grunt.event.on('watch', function(action, filepath, target) {
var taskName = "concat:JS"; //here i calculate dinamically the specific task name to be run
grunt.task.run(taskName);
});
但没有任何反应......任何想法?感谢
答案 0 :(得分:1)
使用grunt.event.on('watch', ...)
侦听器是这种要求的错误工具。相反,您应该对watch
和concat
任务使用多个Targets,如下面Gruntfile.js
摘录中所示。
<强> Gruntfile.js 强>
grunt.initConfig({
watch: {
'JS-index': {
files: ['web/js/test-1.js', 'web/js/test-2.js'],
tasks: ['concat:JS-index']
},
'JS-about-us': {
files: ['web/js/test-3.js', 'web/js/test-4.js'],
tasks: ['concat:JS-about-us']
},
'JS-store': {
files: ['web/js/test-5.js', 'web/js/test-6.js'],
tasks: ['concat:JS-store']
}
},
concat: {
'JS-index': {
files: {
'dist/js/index.js': [
"web/js/test-1.js",
"web/js/test-2.js",
]
}
},
'JS-about-us': {
files: {
"dist/js/about_us.js": [
"web/js/test-3.js",
"web/js/test-4.js",
]
}
},
'JS-store': {
files: {
'dist/js/store.js': [
"web/js/test-5.js",
"web/js/test-6.js",
]
}
}
}
});
备注强>
根据上面显示的配置,通过CLI运行grunt watch
后会发生以下情况:
更改test-1.js
或test-2.js
会将两个文件连接到dist/js/index.js
。
更改test-3.js
或test-4.js
会将两个文件连接到dist/js/about_us.js
。
更改test-5.js
或test-6.js
会将两个文件连接到dist/js/store.js
。
您的路径需要根据需要进行配置
如何使用grunt执行任务?
使用grunt.task.run
是以编程方式运行任务的正确方法。
但是,请参阅grunt-contrib-watch
github repo中的comment。摘录如下:
&#34;请勿使用
grunt.event.on('watch')
来执行您的任务。&#34;
和...
&#34;观看活动不适合运行任务。&#34;
以下解决方案假设您的要求是在更改/编辑其中一个文件时连接某些.js
个文件。在这种情况下,您需要利用tasks
任务的watch
属性来定义要运行的任务(即'concat:JS'
)
<强> Gruntfile 强>
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.initConfig({
watch: {
js: {
files: ['path/to/js/**/*.js'], // <-- 1. Glob pattern to .js files
tasks: ['concat:JS'] // <-- 2. Task to run when .js file changes.
}
},
concat: { // <-- 3. Configure your `concat` task as necessary.
JS: {
src: [
'path/to/js/foo.js',
'path/to/js/bar.js',
'path/to/js/quux.js'
],
dest: 'path/to/output/combined.js'
}
}
});
grunt.registerTask('default', ['watch']);
grunt.event.on('watch', function(action, filepath, target) {
console.log("yep, this code is being executed");
// 4. <-- Do not run task from 'on' listener event.
});
}
备注强>
watch
任务中,定义源.js
文件的glob模式以观察更改。.js
文件更改时要运行的任务;即'concat:JS'
concat
任务。grunt.task.run('concat:JS');
听众中删除grunt.event.on('watch', ...)
。grunt
会在对combined.js
目录中存储的.js
文件进行任何更改时创建新的path/to/js/
文件。 (您需要根据您的要求配置路径) grunt.event.on('watch', ...)
侦听器来运行任务,但可以使用它来配置其他任务。