sass - 在 GitHub 页面上为 Jekyll、Haml、Sass 配置 Grunt

Question

我正在尝试使用 Jekyll、Haml、Sass 运行我的开发/原型(prototype)环境(不是博客)并将其托管在 GitHub Pages 上。

在本地，我使用 Grunt.js 编译 HAML、SASS 并服务/构建 Jekyll。

虽然我的 Gruntfile.js 能够完成我的任务，但当我尝试同时运行构建和服务时，速度非常慢。

任何 Grunt 专家都可以为我指明如何优化 Grunt 配置以使其运行得更快的正确方向吗？谢谢!

以下是我当前的配置:

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

jekyll: {
  options: {                          
    src : './',
    dest: './_gh_pages',
    config: '_config.build.yml'       // avoid the relative baseurl issue
  },

  serve: {
    options: {
      serve: true,
      port: 9001
    }
  },

  dev: {

  }
},

compass: {
  dev: {
    options: {
      config: 'config.rb',
      force: true
    }
  }
},

haml: {
  includes: {
    expand: true,
    cwd: 'haml/includes/',
    src: ['*.haml'],
    dest: '_includes/',
    ext: '.html'
  },
  layouts: {
    expand: true,
    cwd: 'haml/layouts/',
    src: ['*.haml'],
    dest: '_layouts/',
    ext: '.html'
  },
  pages: {
    expand: true,
    cwd: 'haml/',
    src: ['*.haml'],
    dest: './',
    ext: '.html'
  }
},    

watch: {
  options: {
    atBegin: true
  },
  sass: {
    files: ['sass/**/*.scss'],
    tasks: ['compass:dev']
  },
  haml: {
    files: ['haml/**/*.haml'],
    tasks: ['haml:includes', 'haml:layouts', 'haml:pages']
  },
  jekyll: {
    files: ['./**/*.html', './**/*.css'],
    tasks: ['jekyll:dev']
  }
},
concurrent: {
  target: {
    tasks: ['jekyll:serve', 'watch'],
    options: {
      logConcurrentOutput: true
    }
  }
}
});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-haml');
grunt.loadNpmTasks('grunt-concurrent');

grunt.registerTask('default', ['concurrent:target']);

Answer 1

我还没有将 Grunt 与 haml 或 jekyll 一起使用，但我每天使用它来管理多个项目，使用不同的根据需要打包。

仅通过查看 Gruntfile.js 很难判断您的应用程序有多复杂或有多大，但我肯定会从让任务变得更智能开始。 watch 任务通常是我最关注的任务，因为它最好是保存文件时应该运行的唯一任务。例如，如果您保存 .scss 文件，则只会启动 compass:dev 任务。如果您保存 .js 文件，则会启动 jshint、jasmine 和 uglify:dev 任务。这使得开发轮子只在需要的地方转动，并且 Grunt 更快地完成任务。

我在您的 Gruntfile.js 中没有看到的另一件事是 dev 和 dist 的专用任务，这可能是一个很好的实践。一个例子:

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

// Compile production files
grunt.registerTask('dist', [
    'jshint',
    'jasmine',
    'uglify:dist',
    'compass:dist'
]);

// Compile developer friendly environment
grunt.registerTask('dev', [
    'jshint',
    'jasmine',
    'uglify:dev',
    'compass:dev',
    'connect:livereload'
]);

// Default task(s).
grunt.registerTask('default', 'dev’);

在一个 shell 上使用 $ gruntserve 启动本地服务器并观看应用程序。要在不依赖 watch 任务的情况下进行完整构建，请运行 $ grunt 来进行完整的 dev 构建(因为这是本示例中的默认任务)或运行 $ grunt dist 来进行生产就绪构建。

因此，我的建议是在开发时依赖 watch 任务，并谨慎运行 do-it-all 任务。 Grunt 的美妙之处不仅在于多任务处理，还在于按需任务处理。在每个文件保存上运行完整构建是可能的，但效率不高。

顺便说一句，watch 中的 jekyll 任务是空的，因为 jekyll:dev 是空的:

jekyll: {
    files: ['./**/*.html', './**/*.css'],
    tasks: ['jekyll:dev']
}

希望对你有帮助!