Question

尝试理解构建我的sass下划线项目的最佳实践。

我有一个使用npm和grunt的基本工作环境，并且我的主要css已编译，但我想在子文件夹中创建多个页面模板，并将各自的.scss文件输出到/ layout文件夹中，以便我可以在function.php中的主样式表之后将单独的页面模板样式表排队为.css

我按照以下顺序构建了我的项目文件：// updated //

.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输出到布局文件夹中。

Answer 1

有点想找到一个可行的解决方案，可能不是最优雅的解决方案，但它有效，有点......

我按照以下方式构建了我的文件：

.gitignore
404.php
archive.php
comments.php
/compiled
    style-human.css //-- Readable CSS Before prefixing --//
    style.css //-- Minified CSS Before Prefixing --//
    /page-layouts
        frontage.human.css //-- Readable page-template CSS before prefixing --//
        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
    frontage.css //-- prefixed minified CSS to be Enqueued after main style.css in functions.php --//
    frontage-human.css //-- prefixed readable CSS --//
/page-templates
    frontage.php //-- code for template goes here, Enqueued in functions.php --//
page.php
rtl.css
/sass
    _normalize.scss
    /elements
    /forms
    /layout
        _footer
        _header
        /page-layouts //-- working folder for all page templates --//
            _frontpage.scss //-- SASS for page template goes here! --//
    /media
    /mixins
    /modules
    /navigation
    /page-templates
        frontpage.scss //-- @imports content of ../layout/page-layouts/_frontpage.scss --//
    /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: {                // Task
            dev: {             // Target
                options: {     // Target options
                  style: 'expanded',
                    sourcemap: 'none',
                },
                files: {       // Dictionary of files
                 'compiled/style-human.css': 'sass/style.scss', // 'destination': 'source'
                    'compiled/page-layouts/frontpage-human.css': 'sass/page-templates/frontpage.scss'   // 'destination': 'source'
                }
        }, 
        dist: {             // Target
                options: {  // Target options
                  style: 'compressed',
                    sourcemap: 'none',
                },
                files: {       // Dictionary of files
                 'compiled/style.css': 'sass/style.scss',   // 'destination': 'source'
                    'compiled/page-layouts/frontpage.css': 'sass/page-templates/frontpage.scss' // 'destination': 'source'

                }
            }
        },  // close sass task

        /**
        * Autoprefixer
        */
        autoprefixer: {
          options: {
           browsers: ['last 2 versions']
          },
            // prefix all files //
            multiple_files: {
             expand: true,
                flatten: true,
                src: 'compiled/*.css',
                dest: ''
            },
            // prefix frontpage template //
            multiple_files: {
             expand: true,
                flatten: true,
                src: 'compiled/page-layouts/*.css',
                dest: './page-layouts'
            },
        },

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

基本上这是我的意图，页面模板样式表在目标页面布局文件夹中保存为人类可读/缩小的autoprefixed版本，以便我可以在functions.php中的主style.css之后将它们排队

只剩下一个“小”问题，我的页面模板scss文件无法理解变量......

Answer 2

对于我所看到的，您的默认任务仅启动监视任务，如果更新了scss文件，该任务将仅启动sass和autoprefixer任务。

您应该使用：

grunt.registerTask('default',['sass','autoprefixer']);

实际上，我们不会将监视任务放入默认任务，因为它会停止线程。一旦服务器启动，我们就会调用监视任务。（在与gruntfile相同级别的终端中使用命令grunt watch）

SASS - 为页面模板输出单独的样式表

2 个答案: