Question

好的，我正在使用Node / Grunt构建资产构建器应用程序。我的想法是能够管理不同的项目和concat / compass / minify输出。

现在我已经完成了迄今为止我所做的大部分工作。我可以连接我的JS文件（没有minify let）但是我对如何处理我的SASS文件有一些问题。

我使用Grunt团队贡献指南针任务将SASS编译为CSS。但是我应该如何最好地连接文件？

我是否应该使用Grunt的concat构建单个SASS文件，然后将其构建到CSS？如果是这样，如何最好地构建监视调用以观察所有文件以查看更改但仅构建一个SASS / CSS文件？

或者最好有一个'主'SASS文件，只使用SASS的导入功能来构建单个CSS文件？如果是这样，我应该如何使用Grunt构建那个文件，但是要观察所有SASS文件的变化？

我还应该在这里添加我使用指南针来缩小CSS文件。

这是我现在的Grunt文件：

  module.exports = function (grunt) {

   grunt.initConfig({

    pkg:grunt.file.readJSON('package.json'),

    concat: {
        options: {
          separator: ';'
        },
        dist: {
          src: ['js/*.js'],
          dest: 'assets/built.js'
        }
    },
    compass: {
        dist: { 
            options: {
              sassDir: 'sass',
              cssDir: 'assets',
              environment: 'development',
              outputStyle: 'compressed'
            }
        }
    },
    watch: {
        files:['js/*.js','sass/*.scss'],
        tasks:['concat','compass']  
    }

}); 

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('default',['concat','compass']);
  }

非常欢迎所有想法，

由于

格伦。

Answer 1

没关系，我想出了一个解决方案。我已经从指南针插件转移到SASS。我告诉grunt观看所有SCSS文件，如上所述，并告诉它使用SASS插件构建一个单独的css文件。

像这样：

module.exports = function (grunt) {

grunt.initConfig({

    pkg:grunt.file.readJSON('package.json'),

    concat: {
        options: {},
        dist: {
          src: ['js/*.js'],
          dest: 'assets/master.js'
        }
    },
    sass: {
        dist: { 
            options: {
                style: 'compressed'
            },
            files: {
                'assets/master.css' : 'sass/to_build.scss'
            }
        }
    },
    watch: {
        files:['js/*.js','sass/*.scss'],
        tasks:['concat','sass'] 
    }

}); 

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['concat','sass']);
}

我希望这可能有助于其他人。

由于

格伦。

Answer 2

你尝试过使用偏见吗？

http://sass-lang.com/guide

使用partials并让指南针任务根据 .scss创建任何css。（注意这不包括partials _ .scss）这应该处理你的concat问题，就像你使用像compass.app或scout这样的gui而不需要编写额外的grunt配置任务。

Grunt +指南针： http://ryanchristiani.com/add-compass-to-your-grunt-task/

使用Node / Grunt从SASS构建CSS

2 个答案: