grunt watch＆connect

Question

我對grunt很陌生，想用Jekyll和一些LESS編譯。現在

我的問題是，我已經充分運作與現場重裝不太comipiling，看任務，並可以建立在抱怨我的傑奇的網站，但我怎麼運行類似的jekyll serve或咕嚕連接和grunt watch同時？ 我想要一個能夠監視我的LESS文件等的咕task任務，建立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' 
    ]); 

}; 

Answer 1

您需要告訴連接使用「基本」選項在配置中提供哪個目錄，在這種情況下，它將是靜態_site目錄。您也可以更改端口到任何你想要的，但是你最終可以瀏覽到本地主機：9009我的例子

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

你也想加入，當你改變你的HTML模板的手錶任務。像這樣的東西會奏效。

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

然後創建一個像Wallace建議的「服務」任務。

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

最後在命令行中運行「grunt serve」並使用您指定的端口導航到localhost。

---

正如評論說@jiggy

關鍵的變化是不保活設置爲true。 Keepalive將阻止 所有後續任務的運行。只要連接跟着 看服務器將不會終止。

Answer 2

我認爲您的解決方案的心臟是創建一個新的任務或編輯現有的任務，像這樣：

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

...你可以運行一個$ grunt serve。 less，jshint,uglify和connect已包含在watch之下。

Answer 3

我花了2天拼命嘗試每一個gruntfile配置，我可以在互聯網上找到。從未工作過。然後我發現這個https://stackoverflow.com/a/24765175/1541141。 使用grunt-contrib-connect，而不是grunt-connect。 grunt-connect正在阻止... 希望它有幫助。