背景资料：
我目前正在探索使用Yeoman使用generator-jekyllrb生成Jekyll网站。我正在使用Grunt帮助将所有内容整合在一起。 generator-jekyllrb的文档包含有关我的基本设置的更多信息。
问题
目前，我正在尝试使用我使用Bower安装的Bootstrap。我的main.scss文件如下所示：
@import 'bootstrap-sass-official/assets/stylesheets/bootstrap';
@import 'custom/reset';
当我运行grunt build时，一切正常--Grunt编译引导程序文件和我自己的自定义重置/ sass文件。
然而，当我运行grunt serve时，Grunt最初似乎完全忽略了引导程序文件。它成功编译了我的自定义样式，但完全忽略了bootstrap。
我尝试了什么
我确实设法找到了一个解决方法：如果我对main.scss进行任何更改（即使是添加空格这么小的事情），Grunt也会正确编译bootstrap和我的样式。但是，这非常烦人，我宁愿从一开始就让一切正常。
我已尝试删除.jekyll，.sass-cache，.tmp和dist文件夹，以防某些缓存处于损坏状态，但这样做没有效果。
此时，我怀疑问题出在我的Gruntfile.js文件中。 Grunt在服务vs构建时执行的任务是完全不同的，所以我想知道问题是由我为一个任务而不是另一个任务引起的。
不幸的是，我之前从未使用过Yeoman或Grunt，所以我似乎无法确切地确定问题是什么或如何修复它。
我的代码
这是我的gruntfile：
// Generated on 2014-07-08 using generator-jekyllrb 1.2.1
'use strict';
// Directory reference:
// css: _assets/css
// compass: _assets/scss
// javascript: _assets/javascript
// images: _assets/media
// fonts: _assets/fonts
module.exports = function (grunt) {
// Show elapsed time after tasks run
require('time-grunt')(grunt);
// Load all Grunt tasks
require('load-grunt-tasks')(grunt);
grunt.initConfig({
// Configurable paths
yeoman: {
app: 'app',
dist: 'dist'
},
watch: {
compass: {
files: [
'<%= yeoman.app %>/_assets/scss/**/*.{scss,sass}',
'<%= yeoman.app %>/_bower_components/bootstrap-sass-official/assets/stylesheets/*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer:server']
},
autoprefixer: {
files: ['<%= yeoman.app %>/_assets/css/**/*.css'],
tasks: ['copy:stageCss', 'autoprefixer:server']
},
jekyll: {
files: [
'<%= yeoman.app %>/**/*.{html,yml,md,mkd,markdown}',
'!<%= yeoman.app %>/_bower_components/**/*'
],
tasks: ['jekyll:server']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'.jekyll/**/*.html',
'.tmp/_assets/css/**/*.css',
'{.tmp,<%= yeoman.app %>}/<%= js %>/**/*.js',
'<%= yeoman.app %>/_assets/media/**/*.{gif,jpg,jpeg,png,svg,webp}'
]
}
},
connect: {
options: {
port: 9000,
livereload: 35729,
// change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'.jekyll',
'<%= yeoman.app %>'
]
}
},
dist: {
options: {
open: true,
base: [
'<%= yeoman.dist %>'
]
}
},
test: {
options: {
base: [
'.tmp',
'.jekyll',
'test',
'<%= yeoman.app %>'
]
}
}
},
clean: {
dist: {
files: [{
dot: true,
src: [
'<%= yeoman.dist %>/*',
// Running Jekyll also cleans the target directory. Exclude any
// non-standard `keep_files` here (e.g., the generated files
// directory from Jekyll Picture Tag).
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: [
'.tmp',
'.jekyll'
]
},
compass: {
options: {
// If you're using global Sass gems, require them here.
// require: ['singularity', 'jacket'],
bundleExec: true,
sassDir: '<%= yeoman.app %>/_assets/scss',
cssDir: '.tmp/_assets/css',
imagesDir: '<%= yeoman.app %>/_assets/media',
javascriptsDir: '<%= yeoman.app %>/_assets/javascript',
importPath: '<%= yeoman.app %>/_bower_components',
relativeAssets: false,
httpImagesPath: '/_assets/media',
httpGeneratedImagesPath: '/_assets/media/generated',
outputStyle: 'expanded',
raw: 'extensions_dir = "<%= yeoman.app %>/_bower_components"\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/_assets/media/generated'
}
},
server: {
options: {
debugInfo: true,
generatedImagesDir: '.tmp/_assets/media/generated'
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 versions']
},
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>/_assets/css',
src: '**/*.css',
dest: '<%= yeoman.dist %>/_assets/css'
}]
},
server: {
files: [{
expand: true,
cwd: '.tmp/_assets/css',
src: '**/*.css',
dest: '.tmp/_assets/css'
}]
}
},
jekyll: {
options: {
bundleExec: true,
config: '_config.yml,_config.build.yml',
src: '<%= yeoman.app %>'
},
dist: {
options: {
dest: '<%= yeoman.dist %>',
}
},
server: {
options: {
config: '_config.yml',
dest: '.jekyll'
}
},
check: {
options: {
doctor: true
}
}
},
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: '<%= yeoman.dist %>/index.html'
},
usemin: {
options: {
assetsDirs: '<%= yeoman.dist %>',
},
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/_assets/css/**/*.css']
},
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: '**/*.html',
dest: '<%= yeoman.dist %>'
}]
}
},
// Usemin adds files to concat
concat: {},
// Usemin adds files to uglify
uglify: {},
// Usemin adds files to cssmin
cssmin: {
dist: {
options: {
check: 'gzip'
}
}
},
imagemin: {
dist: {
options: {
progressive: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: '**/*.{jpg,jpeg,png}',
dest: '<%= yeoman.dist %>'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: '**/*.svg',
dest: '<%= yeoman.dist %>'
}]
}
},
copy: {
dist: {
files: [
{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
src: [
// Jekyll processes and moves HTML and text files.
// Usemin moves CSS and javascript inside of Usemin blocks.
// Copy moves asset files and directories.
'_assets/media/**/*',
'_assets/fonts/**/*',
// Like Jekyll, exclude files & folders prefixed with an underscore.
'!**/_*{,/**}',
// Explicitly add any files your site needs for distribution here.
//'_bower_components/jquery/jquery.js',
//'favicon.ico',
//'apple-touch*.png'
],
dest: '<%= yeoman.dist %>'
},
{
expand: true,
flatten: true,
dot: true,
cwd: '<%= yeoman.app %>',
src: [
'_bower_components/bootstrap-sass-official/assets/fonts/**/*'
],
dest: '<%= yeoman.dist %>/_assets/css/bootstrap'
}
]
},
// Copy CSS into .tmp directory for Autoprefixer processing
stageCss: {
files: [
{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>/_assets/css',
src: '**/*.css',
dest: '.tmp/_assets/css'
},
{
expand: true,
flatten: true,
dot: true,
cwd: '<%= yeoman.app %>',
src: [
'_bower_components/bootstrap-sass-official/assets/fonts/**/*'
],
dest: '.tmp/_assets/css/bootstrap'
}
]
}
},
filerev: {
options: {
length: 4
},
dist: {
files: [{
src: [
'<%= yeoman.dist %>/_assets/javascript/**/*.js',
'<%= yeoman.dist %>/_assets/css/**/*.css',
'<%= yeoman.dist %>/_assets/media/**/*.{gif,jpg,jpeg,png,svg,webp}',
'<%= yeoman.dist %>/_assets/fonts/**/*.{eot*,otf,svg,ttf,woff}'
]
}]
}
},
buildcontrol: {
dist: {
options: {
remote: '../',
branch: 'gh-pages',
commit: true,
push: true
}
}
},
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/_assets/javascript/**/*.js',
'test/spec/**/*.js'
]
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
check: {
src: [
'<%= yeoman.app %>/_assets/css/**/*.css',
'<%= yeoman.app %>/_assets/scss/**/*.scss'
]
}
},
concurrent: {
server: [
'compass:server',
'copy:stageCss',
'jekyll:server'
],
dist: [
'compass:dist',
'copy:dist'
]
}
});
// Define Tasks
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'concurrent:server',
'autoprefixer:server',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', function () {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve']);
});
// No real tests yet. Add your own.
grunt.registerTask('test', [
// 'clean:server',
// 'concurrent:test',
// 'connect:test'
]);
grunt.registerTask('check', [
'clean:server',
'jekyll:check',
'compass:server',
'jshint:all',
'csslint:check'
]);
grunt.registerTask('build', [
'clean',
// Jekyll cleans files from the target directory, so must run first
'jekyll:dist',
'concurrent:dist',
'useminPrepare',
'concat',
'autoprefixer:dist',
'cssmin',
'uglify',
'imagemin',
'svgmin',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('deploy', [
'check',
'test',
'build',
'buildcontrol'
]);
grunt.registerTask('default', [
'check',
'test',
'build'
]);
};
如果您想使用整个代码库，可以克隆github repo：
git clone https://github.com/Michael0x2a/uwfig.git
cd uwfig
bundle install
bower install
npm install
然后，您可以通过运行：
重现该行为grunt serve
Grunt应该在localhost:9000上提供默认的Jekyll页面。我在页面中添加了两个按钮，两个按钮都使用Bootstrap的样式。如果Bootstrap工作，左边的按钮会变成蓝色，而右边的按钮会有一个星形的glyphicon。目前，没有应用引导程序样式，按钮也很简单。
我目前正在使用Windows 8.1，Ruby版本1.9.3p545，Node.js版本0.10.26，grunt版本0.4.5和grunt-cli版本0.1.13。
答案 0 :(得分：0)
在你的Jekyll config.yml文件中，你设置了：
sass:
sass_dir: root-path-of-your-imported-files-folder
如果你有这个结构
-root/
-css/
-main.scss
-bootstrap-sass-official/
-base.scss
-...
-custom/
-reset.scss
-...
您的 sass_dir 是 css /
答案 1 :(得分：0)
好吧，我已经设法解决了我的问题，但我并不完全确定如何。
以下是我所做的主要更改：
将我的main.css文件修改为如下所示：
$icon-font-path: "/_bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "../../_bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap.scss";
// endbower
@import 'custom/reset';
在提供文件时调用copy:dist任务而不是copy:stageCss。
我并不完全确定究竟是什么修复它 - 我所知道的确定＃3绝对是一个因素，但绝对不是唯一的因素。在应用变更＃3之前没有任何工作，但在新的回购中单独应用＃3不会导致任何变化。
你可以在这里看到完整的差异：
https://github.com/Michael0x2a/uwfig/commit/8d037a619ff09e9d3f5eae4de85e06ea2e69b24c
这是我的最终Grunt文件，供参考：
// Generated on 2014-07-08 using generator-jekyllrb 1.2.1
'use strict';
// Directory reference:
// css: _assets/css
// compass: _assets/scss
// javascript: _assets/javascript
// images: _assets/media
// fonts: _assets/fonts
module.exports = function (grunt) {
// Show elapsed time after tasks run
require('time-grunt')(grunt);
// Load all Grunt tasks
require('load-grunt-tasks')(grunt);
grunt.initConfig({
// Configurable paths
yeoman: {
app: 'app',
dist: 'dist'
},
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep']
},
compass: {
files: [
'<%= yeoman.app %>/_assets/scss/**/*.{scss,sass}',
'<%= yeoman.app %>/_bower_components/bootstrap-sass-official/assets/stylesheets/*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer:server']
},
autoprefixer: {
files: ['<%= yeoman.app %>/_assets/css/**/*.css'],
tasks: ['copy:stageCss', 'autoprefixer:server']
},
jekyll: {
files: [
'<%= yeoman.app %>/**/*.{html,yml,md,mkd,markdown}',
'!<%= yeoman.app %>/_bower_components/**/*'
],
tasks: ['jekyll:server']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'.jekyll/**/*.html',
'.tmp/_assets/css/**/*.css',
'{.tmp,<%= yeoman.app %>}/<%= js %>/**/*.js',
'<%= yeoman.app %>/_assets/media/**/*.{gif,jpg,jpeg,png,svg,webp}'
]
}
},
connect: {
options: {
port: 9000,
livereload: 35729,
// change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'.jekyll',
'<%= yeoman.app %>'
]
}
},
dist: {
options: {
open: true,
base: [
'<%= yeoman.dist %>'
]
}
},
test: {
options: {
base: [
'.tmp',
'.jekyll',
'test',
'<%= yeoman.app %>'
]
}
}
},
clean: {
dist: {
files: [{
dot: true,
src: [
'<%= yeoman.dist %>/*',
// Running Jekyll also cleans the target directory. Exclude any
// non-standard `keep_files` here (e.g., the generated files
// directory from Jekyll Picture Tag).
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: [
'.tmp',
'.jekyll'
]
},
compass: {
options: {
// If you're using global Sass gems, require them here.
// require: ['singularity', 'jacket'],
bundleExec: true,
sassDir: '<%= yeoman.app %>/_assets/scss',
cssDir: '.tmp/_assets/css',
imagesDir: '<%= yeoman.app %>/_assets/media',
javascriptsDir: '<%= yeoman.app %>/_assets/javascript',
importPath: '<%= yeoman.app %>/_bower_components/',
relativeAssets: false,
httpImagesPath: '/_assets/media',
httpGeneratedImagesPath: '/_assets/media/generated',
outputStyle: 'expanded',
raw: 'extensions_dir = "<%= yeoman.app %>/_bower_components"\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/_assets/media/generated'
}
},
server: {
options: {
debugInfo: true,
generatedImagesDir: '.tmp/_assets/media/generated'
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 versions']
},
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>/_assets/css',
src: '**/*.css',
dest: '<%= yeoman.dist %>/_assets/css'
}]
},
server: {
files: [{
expand: true,
cwd: '.tmp/_assets/css',
src: '**/*.css',
dest: '.tmp/_assets/css'
}]
}
},
wiredep: {
options: {
cwd: '<%= yeoman.app %>'
},
app: {
src: ['<% yeoman.app%>/_layouts/*.html'],
ignorePath: /\.\.\//
},
sass: {
src: ['<%= yeoman.app%>/_assets/scss/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
},
jekyll: {
options: {
bundleExec: true,
config: '_config.yml,_config.build.yml',
src: '<%= yeoman.app %>'
},
dist: {
options: {
dest: '<%= yeoman.dist %>',
}
},
server: {
options: {
config: '_config.yml',
dest: '.jekyll'
}
},
check: {
options: {
doctor: true
}
}
},
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: '<%= yeoman.dist %>/index.html'
},
usemin: {
options: {
assetsDirs: '<%= yeoman.dist %>',
},
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/_assets/css/**/*.css']
},
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: '**/*.html',
dest: '<%= yeoman.dist %>'
}]
}
},
// Usemin adds files to concat
concat: {},
// Usemin adds files to uglify
uglify: {},
// Usemin adds files to cssmin
cssmin: {
dist: {
options: {
check: 'gzip'
}
}
},
imagemin: {
dist: {
options: {
progressive: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: '**/*.{jpg,jpeg,png}',
dest: '<%= yeoman.dist %>'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: '**/*.svg',
dest: '<%= yeoman.dist %>'
}]
}
},
copy: {
dist: {
files: [
{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
src: [
// Jekyll processes and moves HTML and text files.
// Usemin moves CSS and javascript inside of Usemin blocks.
// Copy moves asset files and directories.
'_assets/media/**/*',
'_assets/fonts/**/*',
// Like Jekyll, exclude files & folders prefixed with an underscore.
'!**/_*{,/**}',
// Explicitly add any files your site needs for distribution here.
//'_bower_components/jquery/jquery.js',
//'favicon.ico',
//'apple-touch*.png'
],
dest: '<%= yeoman.dist %>'
},
{
expand: true,
flatten: true,
dot: true,
cwd: '<%= yeoman.app %>',
src: [
'_bower_components/bootstrap-sass-official/assets/fonts/**/*'
],
dest: '<%= yeoman.dist %>/_assets/css/bootstrap'
}
]
},
server: {
files: [
{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
src: [
// Jekyll processes and moves HTML and text files.
// Usemin moves CSS and javascript inside of Usemin blocks.
// Copy moves asset files and directories.
'_assets/media/**/*',
'_assets/fonts/**/*',
// Like Jekyll, exclude files & folders prefixed with an underscore.
'!**/_*{,/**}',
// Explicitly add any files your site needs for distribution here.
//'_bower_components/jquery/jquery.js',
//'favicon.ico',
//'apple-touch*.png'
],
dest: '.tmp'
},
{
expand: true,
flatten: true,
dot: true,
cwd: '<%= yeoman.app %>',
src: [
'_bower_components/bootstrap-sass-official/assets/fonts/**/*'
],
dest: '.tmp/_assets/css/bootstrap'
}
]
},
// Copy CSS into .tmp directory for Autoprefixer processing
stageCss: {
files: [
{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>/_assets/css',
src: '**/*.css',
dest: '.tmp/_assets/css'
}
]
}
},
filerev: {
options: {
length: 4
},
dist: {
files: [{
src: [
'<%= yeoman.dist %>/_assets/javascript/**/*.js',
'<%= yeoman.dist %>/_assets/css/**/*.css',
'<%= yeoman.dist %>/_assets/media/**/*.{gif,jpg,jpeg,png,svg,webp}',
'<%= yeoman.dist %>/_assets/fonts/**/*.{eot*,otf,svg,ttf,woff}'
]
}]
}
},
buildcontrol: {
dist: {
options: {
remote: '../',
branch: 'gh-pages',
commit: true,
push: true
}
}
},
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/_assets/javascript/**/*.js',
'test/spec/**/*.js'
]
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
check: {
src: [
'<%= yeoman.app %>/_assets/css/**/*.css',
'<%= yeoman.app %>/_assets/scss/**/*.scss'
]
}
},
concurrent: {
server: [
'compass:server',
'copy:server',
'jekyll:server'
],
dist: [
'compass:dist',
'copy:dist'
]
}
});
// Define Tasks
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'autoprefixer:server',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', function () {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve']);
});
// No real tests yet. Add your own.
grunt.registerTask('test', [
// 'clean:server',
// 'concurrent:test',
// 'connect:test'
]);
grunt.registerTask('check', [
'clean:server',
'jekyll:check',
'compass:server',
'jshint:all',
'csslint:check'
]);
grunt.registerTask('build', [
'clean',
// Jekyll cleans files from the target directory, so must run first
'jekyll:dist',
'wiredep',
'concurrent:dist',
'useminPrepare',
'concat',
'autoprefixer:dist',
'cssmin',
'uglify',
'imagemin',
'svgmin',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('deploy', [
'check',
'test',
'build',
'buildcontrol'
]);
grunt.registerTask('default', [
'check',
'test',
'build'
]);
};