javascript - locally - nodejs grunt

grunt watch & connect

Question

Soy un poco nuevo para gruñir y quiero usarlo con Jekyll y algo de compilación MENOS.

Mi problema ahora es que ya tengo el MENOR de funcionamiento completo con la tarea de recarga y visualización en vivo y puedo construir mi sitio de jekyll a través del gruñido, pero ¿cómo ejecuto algo como el jekyll serve o grunt-connect y el grunt watch simultáneamente? Quiero una tarea que me permita ver mis archivos LESS, etc., construye el sitio jekyll y luego ejecuta un pequeño servidor web con grunt-connect o lo que sea.

Mi Gruntfile.js hasta ahora:

''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''
]);
};

Answer 1

Creo que el corazón de su solución es crear una nueva tarea o editar una tarea existente, como por ejemplo:

// Start web server
grunt.registerTask(''serve'', [
''jekyll:dist'',
''connect:livereload'',
''watch''
]);

... que ejecutarías con un servicio $ grunt serve . less , jshint , uglify y connect ya están incluidos bajo watch .

Answer 2

Debe indicar a Connect qué directorio debe servir en la configuración usando la opción "base", en este caso sería el directorio _site estático. También puede cambiar el puerto a lo que quiera, pero termina navegando a localhost: 9009 con mi ejemplo

connect: {
server: {
options: {
livereload: true,
base: ''_site/'',
port: 9009
}
}
}

También querrá agregar una tarea de vigilancia para cuando cambie sus plantillas html. Algo como esto funcionaría.

watch: {
html: {
files: [''**/*.html'', ''!_site/**/*.html''],
tasks: [''jekyll:dist'']
}
}

Luego crea una tarea de "servir" como sugirió Wallace.

// Start web server
grunt.registerTask(''serve'', [
''jekyll:dist'',
''connect:server'',
''watch''
]);

Por último, ejecute "grunt serve" en la línea de comandos y navegue hasta localhost con el puerto que especificó.

Según lo comentado por @jiggy

El cambio clave es no establecer keepalive en true. Keepalive bloqueará la ejecución de todas las tareas posteriores. Mientras siga la conexión, observe que el servidor no terminará.

Answer 3

Pasé 2 días intentando desesperadamente todas las configuraciones de gruntfiles que pude encontrar en Internet. Nunca funcionó Luego encontré este https://.com/a/24765175/1541141 . Utilice grunt-contrib-connect , NO grunt-connect . grunt-connect está bloqueando ... Espero que ayude.