Рабочий процесс SASS для упрощения отладки CLI через Grunt

Вот мой рабочий процесс. У меня есть 20 файлов scss, которые импортированы в один «app.scss», см. ниже.

@import 
"base/normalize",
"base/foundation/functions",
"base/settings", 
"app/functions",
"app/mixins",
"app/components/icons",
etc

структура папок SASS организована как «SASS/base и SASS/base», в корне есть один файл «app.scss», который импортирует все

Я компилирую компиляцию и наблюдаю за изменениями через 'Gruntfile.js' - это выглядит примерно так

sass: {
        dist: {
            options: {
                includePaths: ['scss'],
                imagesDir: 'assets/img',
                cssDir: 'assets/css'
            },
            files: {
                'assets/css/app.css':  'sass/app.scss'
            }
        }
    },
    watch: {
        sass: {
            files: 'sass/**/*.scss',
            tasks: ['sass']
        },
        css: {
            files: 'assets/**/*.css',
            options: {
                livereload: true
            }
        },
        javascript: {
            files: ['app/**/*.js', 'app/**/*.hbs'],
            options: {
                livereload: true
            }
        }
    },

Это отлично подходит для производства, но в то время как в разработке я хотел бы иметь разные файлы css для целей отладки.

есть ли способ иметь несколько файлов css через Gruntfile и SASS для разработки без необходимости включать 20 <link rel="stylesheet"... на этапе разработки...

на основе комментария об использовании sourceMap, sourceComments вот как выглядит мое ворчание

    sass: {
        dist: {
            options: {
                includePaths: ['scss'],
                imagesDir: 'assets/img',
                cssDir: 'assets/css'
            },
            files: {
                'assets/css/app.css':  'sass/app.scss'
            }
        }
        sourceComments: {
            options: {
                sourceComments: 'normal'
            },
            files: {
                'assets/css/source-comments-app.css':  'sass/app.scss'
            }
    },
        sourceMap: {
            options: {
                sourceComments: 'map',
                sourceMap: 'source-map.css.map'
            },
            files: {
               'assets/css/source-maps-app.css':  'sass/app.scss'
            }
        },
    },

но я получаю сообщение об ошибке... предполагается, что grunt получает всю информацию о сопоставлении из app.scss для исходной карты и исходных комментариев?


css sass gruntjs livereload precompiler
person nolawi    schedule 15.04.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете использовать исходную карту, чтобы легко определить, из какого файла sass взята часть скомпилированного app.css.

См. параметры sourceComments и sourceMap в плагине grunt-sass.

person jtfairbank    schedule 15.04.2014
comment
пытаюсь понять, но документация в плагине довольно тонкая... если я добавлю sourceComment и ourceMap в свой grunt.initConfig ничего не изменится... он все равно компилируется в один файл, я не вижу никакой карты в консоли... - person nolawi; 15.04.2014
comment
Вам просто нужно установить sourceComments: "map" в вашей конфигурации grunt. На основе документации следует создать исходную карту, расположенную в том же каталоге, что и выходные файлы css. - person jtfairbank; 15.04.2014
comment
Дайте мне знать, если у вас все еще есть проблемы, и я посмотрю еще сегодня вечером. Мне действительно нужно реализовать эту функциональность для моего загрузчика проекта Milkshake, так что также дайте мне знать, что вы сделали, чтобы сделать это работает. :) - person jtfairbank; 15.04.2014
comment
у меня проблемы. Я попытался добавить его через пример [github.com/sindresorhus/grunt -sass/blob/master/Gruntfile.js] но, похоже, это вообще не имеет смысла.. - person nolawi; 15.04.2014

arrow_upward
0
arrow_downward

Я нашел ответ через хрюканье.. после многих испытаний

       sass: {
        dist: {
            options: {
                includePaths: ['scss'],
                imagesDir: 'assets/img',
                cssDir: 'assets/css',
                sourceComments: 'map',
                sourceMap:'assets/css/app.css.map'
            },
            files: {
                'assets/css/app.css':  'sass/app.scss'
            }
        }
    },

это должно быть внутри параметров компиляции scss!

person nolawi    schedule 15.04.2014

arrow_upward
0
arrow_downward

Я использую Grunt с Foundation 5 (точнее, подтему Foundation 5 Drupal), и это сработало, когда я добавил sourceComments: "map" к dist, например так:

dist: { options: { **YOUR OTHER OPTIONS HERE*** sourceComments: "map" } }

person dalehgeist    schedule 11.06.2014