Question

我正在尝试使用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']);

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来制作生产就绪的构建。

所以我的建议是在开发和运行 do-it-all 任务时依赖watch任务。 Grunt的美丽不仅体现在多任务上，还体现在按需任务上。可以在每个文件保存上运行完整版本，但效率不高。

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

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

希望它有所帮助！

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

1 个答案: