【发布时间】：2016-08-27 16:35:28
【问题描述】：
试图了解构建我的 sass underscores 项目的最佳实践。
我有一个使用 npm 和 grunt 的基本工作环境，并编译了我的主 css，但我想在子文件夹中创建多个页面模板，并将它们各自的 .scss 文件输出到 /layout 文件夹中，以便我可以在 function.php 中的主样式表之后将单独的页面模板样式表作为 .css 排入队列
我大致按以下顺序构建我的项目文件：//更新//
.gitignore
404.php
archive.php
comments.php
/compiled
style-human.css // Readable CSS Before prefixing //
style.css // Minified CSS Before Prefixing //
/page-layouts
page-frontage.human.css // Readable page-template CSS before prefixing //
page-frontage.css // minified page-template CSS before prefixing //
/fonts
footer.php
functions.php
gruntfile.js
header.php
/inc
index.php
/js
/languages
/node_modules
package.json
/page-layouts
page-frontage.css // prefixed minified CSS to be Enqueued after main style.css in functions.php //
page-frontage-human.css // prefixed readable CSS //
/page-templates
page-frontpage.php
page.php
rtl.css
/sass
_normalize.scss
/elements
/forms
/layout
_footer
_header
/page-layouts
_page-frontpage.scss
/media
/mixins
/modules
/navigation
/site
style.css // @imports everything SCSS except page-layouts //
/variables-site
search.php
sidebar.php
single.php
style-human.css // readable main stylesheet //
style.css // minified main stylesheet Enqueued in functions.php //
/template-parts
这是我在 gruntfile.js 中使用的代码
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/**
* sass task
*/
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none',
},
files: {
'compiled/style-human.css': 'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none',
},
files: {
'compiled/style.css': 'sass/style.scss'
}
}
},
/**
* Autoprefixer
*/
autoprefixer: {
options: {
browsers: ['last 2 versions']
},
// prefix all files //
multiple_files: {
expand: true,
flatten: true,
src: 'compiled/*.css',
dest: ''
}
},
/**
* Watch task
*/
watch: {
css: {
files: '**/*scss',
tasks: ['sass','autoprefixer']
}
}
});
grunt.loadNpmTasks ('grunt-contrib-sass');
grunt.loadNpmTasks ('grunt-contrib-watch');
grunt.loadNpmTasks ('grunt-autoprefixer');
grunt.registerTask('default',['watch']);
}
现在我已经尝试了几种不同的解决方案，但我还远未了解我应该如何构建我的 gruntfile.js 以便它将我的两个页面模板 scss 输出为布局文件夹中的自动前缀 css。
【问题讨论】：
-
你的实际代码有什么作用吗？
-
现在它需要我的 style.scss 并将其编译成常规的人类可读 style-human.css 和缩小的 style.css 并将它们放入 /compiled 文件夹，然后在这些文件夹上运行 autoprefixer文件并将它们放在我的主题文件的根目录中。
-
我基本上希望它继续这样做，并获取我的 /page-template scss 文件并重复该过程，然后编译并为这些文件添加前缀，最后将它们放入 /page templates 文件夹中我可以在functions.php中的主要主要样式.css之后将它们排入队列
标签： javascript css wordpress sass gruntjs