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.