0

好的，我正在使用 Node / Grunt 构建一个资产构建器应用程序。我的想法是能够管理不同的项目并连接/罗盘/缩小输出。

现在我已经完成了迄今为止所做的大部分工作。我可以连接我的 JS 文件（没有缩小让），但我在如何处理我的 SASS 文件方面遇到了一点问题。

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

我应该将 concat 与 Grunt 一起使用来构建单个 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']);
  }

非常欢迎所有想法，

谢谢

格伦。

4

2 回答 2

1

您是否尝试过使用局部变量？

http://sass-lang.com/guide

使用部分并让指南针任务基于.scss 创建任何 css。（注意这不包括部分 _ .scss）这应该可以处理您的 concat 问题，就像您使用 compass.app 或 scout 之类的 gui 一样，而无需编写额外的 grunt 配置任务。

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

于 2014-01-22T23:23:05.067 回答
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']);
}

我希望这可能对其他人有所帮助。

谢谢

格伦。

于 2013-10-30T15:14:16.977 回答