grunt手表&连 [英] grunt watch & connect
问题描述
现在我的问题是，我已经完全运作了LESS-comipiling与实时重新加载和观看任务，并可以通过grunt建立我的jekyll网站，但我如何运行像 jekyll serve 或grunt-connect和 grunt同时观看？
我想要一个能够监视我的LESS文件等的咕噜任务，建立jekyll站点，然后用grunt-connect或其他方式运行一个小型web服务器。
到目前为止我的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'
]
}，
选项：{
compress：true，
// LESS源地图
//启用，将sourceMap设置为true并根据您的安装更新sourceMapRootpath
sourceMap：false，
sourceMapFilename：'css / styles.min.css.map'，
sourceMapRootpath：'/
}
}，
dev：{
文件：{
'css / styles.min.css'：[
'less / app.less '
]
}，
选项：{
compress：false，
// LESS源地图
//启用时，将sourceMap设置为true，根据您的安装更新sourceMapRootpath
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 /ffix.js'，
'vendor / *。js'，
'js / _ *。js'
]
}，
options：{
// JS源地图：启用，取消注释下面的行并根据您的安装更新sourceMappingURL
// sourceMap：'assets / js / scri pts.min.js.map'，
// sourceMappingURL：'/app/themes/roots/assets/js/scripts.min.js.map'
}
}
$，b $ b watch：{
less：{
files：[
'less / *。less'，
'less / bootstrap / *。less'$
文件：[
'<％= jshint.all ％>'
]，
tasks：['jshint'，'uglify']
}，
livereload：{
//浏览器实时重新加载$ b $ b // 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：{//通用选项
bundleExec：true，
src：'<％= app％>'
}，
dist：{//目标
选项：{//目标选项
dest：'<％= dist％>'，
config：'_config.yml'
}
} ，
serve：{//另一个目标
选项：{
serve：true，
草稿：真
}
}
}，
connect：{
服务器：{
选项：{
keepalive：true
}
}
}
}）;
//载入任务
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'）;
//注册任务
grunt.registerTask（'default'，[
'clean'，
'less：dist'，
'uglify' ，
'jekyll：dist'
]）;
grunt.registerTask（'dev'，[
'watch'
]）;
};
您需要告知连接要提供的目录使用基本选项的配置，在这种情况下，它将是静态的_site目录。您也可以将端口更改为任何您想要的，但最终导航到本地主机：9009，以我的示例为例
connect：{
服务器：{
选项：{
livereload：true，
base：'_site /'，
port：9009
}
}
}
当您更改html模板时，您还需要添加监视任务。
watch：{
html：{
files：['** /*.html'，'！_site / ** / *。html']，
tasks：['jekyll：dist']
}
}
$ b $ p>
//启动web服务器
grunt.registerTask（'serve'，[
'jekyll：dist'，
'connect：server'，
'watch '
]）;
最后在命令行中运行grunt serve并使用您指定的端口导航到localhost。 / p>
评论@ jiggy
< blockquote>
关键更改是不将keepalive设置为true。 Keepalive会阻止
后续所有运行任务。只要connect后跟
，服务器就不会终止。
I am kinda new to grunt and want to use it with Jekyll and some LESS-compiling.
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 serve or grunt-connect and grunt watch simultaneously?
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.
My Gruntfile.js so far:
'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'
]);
};
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
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.
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.
As commented by @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.
这篇关于grunt手表&连的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
