设置 grunt 来构建 Jekyll 站点、服务和 livereload答案

【问题标题】：Set up grunt to build Jekyll site, serve & livereload设置 grunt 来构建 Jekyll 站点、服务和 livereload
【发布时间】：2014-06-16 11:06:30
【问题描述】：

我有一个简单的 Jekyll 站点，并且正在使用 grunt 编译 LESS 文件。

我想建立继续编译 .less 文件、构建 jekyll 站点并在本地提供服务的能力。我还有一个任务是观察编译后的 css 文件并将其复制到 jekyll _site 文件夹中。

但是我目前的 Grunftile 并不能很好地工作：

module.exports = function (grunt) {
grunt.initConfig({
    // compile set less files
    less: {
        development: {
            options: {
                paths: ["assets/less"],
                yuicompress: true,
                compress: true
            },
            files: {
                "assets/css/site.css": ["assets/less/*.less", "!assets/less/_*.less"]
            }
        }
    },

    // watch changes to less files
    watch: {
        styles: {
            files: ["less/**/*"],
            tasks: ["less", "copy:css"]
        },
        options: {
            livereload: true,
            spawn: false,
        },
    },

    // copy compiled css to _site
    copy: {
      css : {
        files: {
            cwd: './assets/css/',
            src: 'site.css',
            dest: './_site/assets/css',
            expand: true
        }
      }
    },

    //  run jekyll command
    shell: {
      jekyll: {
        options: {
          stdout: true
        },
        command: 'jekyll build'
      }
    },

    //  jekyll build
    jekyll: {
        files: [
          '*.html', '*.yml', 'assets/js/**.js',
          '_posts/**', '_includes/**'
        ],
        tasks: 'shell:jekyll',
        options: {
          livereload: true
        }
      },

      exec: {
        server: {
            command: 'jekyll serve -w'
        }
      },

      concurrent: {
          options: {  logConcurrentOutput: true },
          server: {
            tasks: ['watch', 'exec:server']
          }
      }

});

// Load tasks so we can use them
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-concurrent');

// the default task will show the usage
grunt.registerTask("default", "Prints usage", function () {
    grunt.log.writeln("");
    grunt.log.writeln("Using Base");
    grunt.log.writeln("------------------------");
    grunt.log.writeln("");
    grunt.log.writeln("* run 'grunt --help' to get an overview of all commands.");
    grunt.log.writeln("* run 'grunt dev' to start watching and compiling LESS changes.");
});

grunt.registerTask("dev", ["less:development", "watch:styles", "copy:css", "shell:jekyll", "concurrent:server"]);

};

【问题讨论】：

“不太好用”....怎么样？错误信息？问题描述？问题不清楚。
没有错误，但是jekyll build和css copy任务都没有运行。 LESS 文件正在编译。问题在于“copy:css”、“shell:jekyll”和“concurrent:server”任务的设置。希望能更清楚

标签： gruntjs npm jekyll

【解决方案1】：

让 Grunt 也使用 grunt-jekyll https://github.com/dannygarcia/grunt-jekyll 构建 Jekyll 可能会更好。我怀疑在复制任务将编译后的 LESS 输出放在那里之后，Jekyll 清理输出目录时遇到了问题，因此以正确的顺序运行任务很重要。

有一个出色的 Yeoman 生成器，具有完整的 Jekyll / Grunt 工作流程，也值得一试； https://github.com/robwierzbowski/generator-jekyllrb 如果您不想使用 Yeoman，那么您至少会在 Gruntfile https://github.com/robwierzbowski/generator-jekyllrb/blob/master/app/templates/Gruntfile.js 中找到一些有用的指针

【讨论】：