Основные глобальные стили, неожиданно повторяющиеся в файле Grunt
Это сложный вопрос, чтобы объяснить, я постараюсь быть максимально тщательным:
Моя настройка - Использование генератора Jekyllrb
Я взял генератор Jekyllrb Yeoman и интегрировал в него Zurb's Foundation 5 самым простым способом (используя только файлы Sass) в соответствии с инструкциями Zurb.
Мои пути Sass в grunt.js следующие:
loadPath: 'app/_bower_components/foundation/scss'
и в моем /_scss у меня есть:
app.scss
_settings.scss
В app.scss - я включаю ряд компонентов Foundation (например, аккордеон, тип, вкладки и т. Д.). Каждый приносит с собой набор глобальных стилей. Эти стили заключены в следующем:
@include exports("global") { ... }
Который по этой ссылке:
"Когда sass-import-Once включен в модуль SASS, он предотвращает дублирование стилей, если @import вызывается где-то еще. Это здорово, потому что он позволяет каждому файлу SASS объявлять свои собственные зависимости. Это способствует инкапсуляции и позволяет модулям работать автономно. если нужно."
Мой Grunt.js
// Generated on 2014-09-28 using generator-jekyllrb 1.2.1
'use strict';
// Directory reference:
// css: css
// sass: _scss
// javascript: scripts
// images: img
// fonts: 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: {
sass: {
files: ['<%= yeoman.app %>/_scss/**/*.{scss,sass}'],
tasks: ['sass:server']
},
autoprefixer: {
files: ['<%= yeoman.app %>/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,<%= yeoman.app %>}/css/**/*.css',
'{.tmp,<%= yeoman.app %>}/<%= js %>/**/*.js',
'<%= yeoman.app %>/img/**/*.{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'
]
},
sass: {
options: {
bundleExec: true,
debugInfo: false,
lineNumbers: false,
loadPath: 'app/_bower_components/foundation/scss'
},
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/_scss',
src: '**/*.{scss,sass}',
dest: '.tmp/css',
ext: '.css'
}]
},
server: {
options: {
debugInfo: false,
lineNumbers: false
},
files: [{
expand: true,
cwd: '<%= yeoman.app %>/_scss',
src: '**/*.{scss,sass}',
dest: '.tmp/css',
ext: '.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 %>/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.
'img/**/*',
'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 %>'
}]
}
},
filerev: {
options: {
length: 4
},
dist: {
files: [{
src: [
'<%= yeoman.dist %>/scripts/**/*.js',
'<%= yeoman.dist %>/css/**/*.css',
'<%= yeoman.dist %>/img/**/*.{gif,jpg,jpeg,png,svg,webp}',
'<%= yeoman.dist %>/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 %>/scripts/**/*.js',
'test/spec/**/*.js'
]
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
check: {
src: [
'<%= yeoman.app %>/css/**/*.css',
'<%= yeoman.app %>/_scss/**/*.scss'
]
}
},
concurrent: {
server: [
'sass:server',
'jekyll:server'
],
dist: [
'sass: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',
'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',
'sass: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',
'cssmin',
'uglify',
'imagemin',
'svgmin',
'filerev',
'usemin',
'htmlmin'
]);
grunt.registerTask('deploy', [
'check',
'test',
'build',
'buildcontrol'
]);
grunt.registerTask('default', [
'check',
'test',
'build'
]);
};
Эта проблема
Эти глобальные стили дублируются в окончательной скомпилированной таблице стилей независимо от функции "@include exports", указывающей на разрешение дубликатов. Я использовал grunt-contrib-sass раньше и никогда не сталкивался с этой проблемой. Приводит меня к мысли, что причиной может быть какая-то другая задача?
На больше вещь:
Я знаю, что есть переменная в _settings.scss Фонда, которая имеет:
$include-html-global-classes: $include-html-classes;
Я не хочу отключать это - как я хочу глобальные стили в моей таблице стилей - я просто хочу, чтобы они появлялись только один раз.
Я настроил репо
Я был бы очень признателен, если бы кто-нибудь мог взглянуть на это для меня. Я собрал самый простой пример, чтобы проиллюстрировать эту проблему. Беглый взгляд на инспектора (при обслуживании страницы) покажет вам беспорядок дублированных стилей в DOM.
1 ответ
Согласно этой проблеме в Foundation GitHub, существует небольшая путаница с тем, как Foundation движется быстро и ломает вещи вокруг exports поведение.
Я попробовал ваш тестовый репозиторий с Foundation откатился до версии 5.4.4 (вместо последнего, который 5.4.5) и это сработало для меня.
Итак, вам просто нужно изменить зависимость Foundation в вашем bower.json чтобы:
"dependencies": {
"foundation": "zurb/bower-foundation#5.4.4"
},
и все должно работать.
Из того, что я прочитал в этой теме, как только Фонд выпустит 5.5 Вы должны быть в состоянии переключиться на это без каких-либо проблем.
Надеюсь, это поможет!