Question

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

我希望能够继续编译.less文件，构建jekyll网站＆amp;在当地服务。我还有一项任务是查看并将已编译的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"]);

};

Answer 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

设置咕噜声来建立Jekyll网站，服务＆amp; livereload

1 个答案: