我是Grunt和Javascript / Coffeescript的新手。
我们在一个包含数百个.coffee文件的大型项目中使用Grunt。由于Grunt编译所有咖啡文件(尽管只有一个文件已经更改),我最初的问题是如何让Grunt只编译一个更改的文件。 使用stackoverflow我能够回答这个问题,谢谢大家:)
但现在似乎已实施的解决方案打破了livereload。当我从“grunt服务器”开始并在浏览器中显示我的页面时,一切看起来都很好。然后我更改一个.coffee文件并保存。文件被编译(我已检查),但我的浏览器从未被重新加载。只有当我手动重新加载浏览器时,才会显示新修改的代码。
所以问题是:为什么livereload不再有效?
我不知道这是否重要,但Gruntfile是在旧版本中使用yeoman创建的(使用grunt-regarde)。我使用grunt-contrib-watch和buildin livereload将package.json和Gruntfile更新为更新的规范。没有grunt.event.on
一切正常。
来源(部分):
grunt.initConfig({
watch: {
coffee: {
files: ['<%= yeoman.app %>/coffeescripts/**/*.coffee'],
tasks: ['coffee:app'],
options: {
nospawn: true
},
},
compass: {
files: ['<%= yeoman.app %>/styles/**/*.{scss,sass}'],
tasks: ['compass']
},
templates: {
files: ['<%= yeoman.app %>/templates/**/*.tpl'],
tasks: ['handlebars']
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'<%= yeoman.app %>/*.html',
'<%= yeoman.tmp %>/styles/**/*.css',
'<%= yeoman.tmp %>/scripts/**/*.js',
'<%= yeoman.tmp %>/spec/**/*.js',
'<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,webp}',
]
}
},
coffee: {
app: {
expand: true,
cwd: '<%= yeoman.app %>/coffeescripts',
src: '**/*.coffee',
dest: '<%= yeoman.tmp %>/scripts',
ext: '.js',
options: {
runtime: 'inline',
sourceMap: true
},
}
}
}
});
grunt.event.on('watch', function(action, filepath) {
filepath = filepath.replace(grunt.config('coffee.app.cwd')+'/', '' );
grunt.config('coffee.app.src', [filepath]);
});
grunt.registerTask('server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'coffee',
'compass:server',
'symlink:bower',
'connect:livereload',
'handlebars',
'notify:watch',
'watch'
]);
});
grunt-contrib-watch与版本v0.4.4
一起使用,
connect-livereload与版本0.2.0
答案 0 :(得分:0)
我的解决方案:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
dist: {
expand: true,
cwd: 'app',
src: ['**/*.css'],
dest: 'WebContent'
}
},
uglify: {
options: {
mangle: false
},
dist: {
expand: true,
cwd: 'app/js',
src: ['**/*.js'],
dest: 'WebContent/js'
}
},
htmlmin: {
options: {
collapseWhitespace: true
},
dist: {
expand: true,
cwd: 'app',
src: ['**/*.html'],
dest: 'WebContent'
}
},
watch: {
options: {
spawn: false
},
cssmin: {
files: 'app/css/**/*.css',
tasks: ['cssmin']
},
uglify: {
files: 'app/js/**/*.js',
tasks: ['uglify']
},
htmlmin: {
files: 'app/**/*.html',
tasks: ['htmlmin']
}
},
});
// Faz com que seja salvo somente o arquivo que foi alterado
grunt.event.on('watch', function(action, filepath) {
var tasks = ['cssmin', 'uglify', 'htmlmin'];
for (var i=0, len=tasks.length; i < tasks.length; i++) {
var taskName = tasks[i];
if (grunt.file.isMatch(grunt.config('watch.'+ taskName +'.files'), filepath)) {
var cwd = new String(grunt.config(taskName + '.dist.cwd')).split('/').join('\\') + '\\'; //inverte as barras e adiciona uma "\" no final
var pathWithoutCwd = filepath.replace(cwd, ''); //obtem somente o path sem o cwd
grunt.config(taskName + '.dist.src', pathWithoutCwd); //configura a task
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// Tarefas padrão
grunt.registerTask('default', ['cssmin', 'uglify', 'htmlmin']);
};
答案 1 :(得分:0)
我猜grunt-concurrent
就是您要搜索的内容。
这是我的方法。 (请注意它以咖啡脚本编写,但您应该能够轻松地进行调整。)
watch:
compass:
files: ['private/compass/**/*.scss']
tasks: ['compass:dist']
options:
livereload: true
coffee:
options:
livereload: 34567
files: ['private/coffee/**/*/.coffee']
tasks: ['coffee:dist']
ci:
options:
livereload: 34568
files: ['application/views/**/*.php', 'application/controllers/**/*.php']
concurrent:
options:
logConcurrentOutput: true
dev: ['watch:compass', 'watch:coffee', 'watch:ci']