grunt watch & connect

Question

grunt watch & connect

javascriptgruntjsjekyllgrunt-contrib-watch

26

我对Grunt还比较陌生，想要将其与Jekyll和一些LESS编译一起使用。

我的问题是，我已经可以通过Grunt进行完整的LESS编译，并具备实时重载和监视任务，同时可以通过Grunt构建我的jekyll网站，但如何同时运行像jekyll serve或grunt-connect和grunt watch这样的操作呢？我希望有一个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'
                    ]
                },
                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'
    ]);

};

- Kageetai

3个回答

3

我花了2天的时间拼命尝试在互联网上找到的每个gruntfile配置。从未成功过。然后我找到了这个https://dev59.com/OrHos4cB2Jgan1znxGyK#24765175。使用grunt-contrib-connect，而不是grunt-connect。grunt-connect会阻塞... 希望能有所帮助。

- OoDeLally

2

我认为你的解决方案的核心是创建一个新任务或编辑现有任务，就像这样：

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

...这个程序可以通过$ grunt serve命令运行。在watch下已经包含了less、jshint、uglify和connect。

- Wallace Sidhrée

请记住：您可以创建任意数量的任务，并使用“$ grunt <task>”调用它们。运行任何组合，如果一个任务依赖于另一个任务先运行，请注意加载顺序。 - Wallace Sidhrée

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bribou · Accepted Answer

你需要告诉connect在配置中使用"base"选项来提供哪个目录，这种情况下它将是静态站点目录。你也可以更改端口到任何想要的值，但实例中需要导航到localhost:9009。

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

你还需要添加一个监视任务，以便在更改HTML模板时进行监视。类似这样的内容可以起作用。

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

那么按照Wallace的建议创建一个“serve”任务。

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

最后在命令行中运行“grunt serve”，并导航到您指定的端口的localhost。

@jiggy的评论：

关键更改是不要将keepalive设置为true。 Keepalive将阻止所有后续任务运行。只要连接后跟随监视器，服务器就不会终止。