且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

grunt手表&连

更新时间:2023-02-26 21:31:16

您需要告知连接要提供的目录使用基本选项的配置,在这种情况下,它将是静态的_site目录。您也可以将端口更改为任何您想要的,但最终导航到本地主机:9009,以我的示例为例

  connect:{ 
服务器:{
选项:{
livereload:true,
base:'_site /',
port:9009
}
}
}

当您更改html模板时,您还需要添加监视任务。

  watch:{
html:{
files:['** /*.html','!_site / ** / *。html'],
tasks:['jekyll:dist']
}
}
$ c然后创建一个像Wallace建议的服务任务。

$ b $ p>

//启动web服务器
grunt.registerTask('serve',[
'jekyll:dist',
'connect:server',
'watch '
]);

最后在命令行中运行grunt serve并使用您指定的端口导航到localhost。 / p>




评论@ jiggy




关键更改是不将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.