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

Question

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

在本地，我使用Grunt.js编译HAML、SASS和serve/build。

虽然我的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上使用$ grunt serve启动本地服务器并查看应用程序。若要在不依赖watch任务的情况下进行完整构建，请运行$ grunt进行完整的dev构建(因为这是本示例中的默认任务)，或者运行$ grunt dist以进行生产准备构建。

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

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

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

希望能帮上忙！