javascript 咕噜咕噜手表和连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21836478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
grunt watch & connect
提问by Kageetai
I am kinda new to grunt and want to use it with Jekyll and some LESS-compiling.
我对 grunt 有点陌生，想将它与 Jekyll 和一些 LESS 编译一起使用。
My problem now is, I already have fully functioning LESS-comipiling with live reload and watch task and can build my jekyll site through grunt, but how do I run something like the jekyll serveor grunt-connect and grunt watchsimultaneously?
I want a grunt task that provides the watching of my LESS-files etc, builds the jekyll site and then runs a small web server with grunt-connect or whatever.
我现在的问题是，我已经拥有完整的 LESS 编译功能，带有实时重新加载和监视任务，并且可以通过 grunt 构建我的 jekyll 站点，但是我如何同时运行类似jekyll serveor grunt-connect 之类的东西grunt watch？我想要一个 grunt 任务，它可以监视我的 LESS 文件等，构建 jekyll 站点，然后运行带有 grunt-connect 或其他任何东西的小型 Web 服务器。
My Gruntfile.js so far:
我的 Gruntfile.js 到目前为止：
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'js/*.js',
'!js/scripts.min.js'
]
},
less: {
dist: {
files: {
'css/styles.min.css': [
'less/app.less'
]
},
options: {
compress: true,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: false,
sourceMapFilename: 'css/styles.min.css.map',
sourceMapRootpath: '/'
}
},
dev: {
files: {
'css/styles.min.css': [
'less/app.less'
]
},
options: {
compress: false,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: true,
sourceMapFilename: 'css/styles.min.css.map',
sourceMapRootpath: '/'
}
}
},
uglify: {
dist: {
files: {
'js/scripts.min.js': [
'vendor/bootstrap/js/transition.js',
'vendor/bootstrap/js/alert.js',
'vendor/bootstrap/js/button.js',
'vendor/bootstrap/js/carousel.js',
'vendor/bootstrap/js/collapse.js',
'vendor/bootstrap/js/dropdown.js',
'vendor/bootstrap/js/modal.js',
'vendor/bootstrap/js/tooltip.js',
'vendor/bootstrap/js/popover.js',
'vendor/bootstrap/js/scrollspy.js',
'vendor/bootstrap/js/tab.js',
'vendor/bootstrap/js/affix.js',
'vendor/*.js',
'js/_*.js'
]
},
options: {
// JS source map: to enable, uncomment the lines below and update sourceMappingURL based on your install
// sourceMap: 'assets/js/scripts.min.js.map',
// sourceMappingURL: '/app/themes/roots/assets/js/scripts.min.js.map'
}
}
},
watch: {
less: {
files: [
'less/*.less',
'less/bootstrap/*.less'
],
tasks: ['less:dev']
},
js: {
files: [
'<%= jshint.all %>'
],
tasks: ['jshint', 'uglify']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: true
},
files: [
'_site/*'
]
}
},
clean: {
dist: [
'css/styles.min.css',
'css/styles.min.css.map',
'js/scripts.min.js',
'_site/*'
]
},
jekyll: { // Task
options: { // Universal options
bundleExec: true,
src : '<%= app %>'
},
dist: { // Target
options: { // Target options
dest: '<%= dist %>',
config: '_config.yml'
}
},
serve: { // Another target
options: {
serve: true,
drafts: true
}
}
},
connect: {
server: {
options: {
keepalive: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-connect');
// Register tasks
grunt.registerTask('default', [
'clean',
'less:dist',
'uglify',
'jekyll:dist'
]);
grunt.registerTask('dev', [
'watch'
]);
};
回答by bribou
You need to tell connect what directory to serve up in the configuration using the "base" option, in this case it would be the static _site directory. You can also change the port to whatever you want, but you end up navigating to localhost:9009 with my example
您需要使用“base”选项告诉 connect 在配置中提供哪个目录，在这种情况下，它将是静态 _site 目录。您也可以将端口更改为您想要的任何端口，但您最终会使用我的示例导航到 localhost:9009
connect: {
server: {
options: {
livereload: true,
base: '_site/',
port: 9009
}
}
}
You will also want to add a watch task for when you change your html templates. Something like this would work.
您还需要在更改 html 模板时添加监视任务。像这样的事情会起作用。
watch: {
html: {
files: ['**/*.html', '!_site/**/*.html'],
tasks: ['jekyll:dist']
}
}
Then create a "serve" task like Wallace suggested.
然后像华莱士建议的那样创建一个“服务”任务。
// Start web server
grunt.registerTask('serve', [
'jekyll:dist',
'connect:server',
'watch'
]);
Lastly run "grunt serve" in the command line and navigate to localhost with the port you specified.
最后在命令行中运行“grunt serve”并使用您指定的端口导航到本地主机。
As commented by @jiggy
正如@jiggy 所评论的
The key change is to not set keepalive to true. Keepalive will block all subsequent tasks from running. So long as connect is followed by watch the server won't terminate.
关键的变化是不要将 keepalive 设置为 true。Keepalive 将阻止所有后续任务运行。只要 connect 后面跟着 watch，服务器就不会终止。
回答by OoDeLally
I spent 2 days desperately trying every gruntfile-configuration I could find on the internet. Never worked. Then I found this https://stackoverflow.com/a/24765175/1541141.
Use grunt-contrib-connect, NOT grunt-connect. grunt-connectis blocking...
Hope it helps.
我花了 2 天的时间拼命尝试我可以在互联网上找到的所有 gruntfile 配置。从来没有工作过。然后我找到了这个https://stackoverflow.com/a/24765175/1541141。使用grunt-contrib-connect，不是grunt-connect。grunt-connect正在阻止...希望它有帮助。
回答by Wallace Sidhrée
I think the heart of your solution is to create a new task or edit an existing task, like so:
我认为您的解决方案的核心是创建新任务或编辑现有任务，如下所示：
// Start web server
grunt.registerTask('serve', [
'jekyll:dist',
'connect:livereload',
'watch'
]);
...which you would run with a $ grunt serve. less, jshint, uglifyand connectare already included under watch.
...您将使用$ grunt serve. less，jshint，uglify和connect下已经包含watch。
