2

我正在尝试使用 Jekyll、Haml、Sass 运行我的开发/原型设计环境(不是博客)并将其托管在 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']);
4

1 回答 1

4

我没有使用Grunthamlor jekyll,但我每天都使用它来管理多个项目,并根据需要使用不同的包。

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

我在您的文章中没有看到的另一件事是andGruntfile.js的专用任务,这可能是一个很好的做法。一个例子:devdist

// 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']
}

希望能帮助到你!

于 2014-01-02T22:06:01.830 回答