如何使用grunt将多个sass文件合并到一个css文件中?

时间:2015-02-12 19:51:02

标签: sass gruntjs

好的,我使用当前版本的grunt并向谷歌询问很多,但我无法找到任何帮助。

我的gruntfile.js看起来像:

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
        dev: {
            src: ['src/*.scss'],
            dest: 'src/css/main.css',
        },
    },
    watch: {
        sass: {
            // We watch and compile sass files as normal but don't live reload here
            files: ['src/*.scss'],
            tasks: ['sass'],
        },
        livereload: {
            // Here we watch the files the sass task will compile to
            // These files are sent to the live reload server after sass compiles to them
            options: { livereload: true },
            files: ['src/**/*'],
            //tasks: ['includes'],
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default',['watch']);

}

我想将所有SASS文件合并到一个master.css文件中。

我需要concat插件来解决它吗? 有人可以告诉我一个grunfile.js的工作示例吗?

2 个答案:

答案 0 :(得分:2)

不需要concat插件。这是一个主app文件的示例,其中可以导入所有sass文件。组织的额外好处和源订单的固有好处。

//
// App
// app.scss 
// 
// 1. Config
// 2. Mixins
// 3. Normalize
// 4. Fonts
// 5. BaseStyles
// 6. Modules
// 7. Views
//

//
// @Config
//
@import "config";

//
// @Mixins
//
@import "mixins/helpers";
@import "mixins/grid";

//
// @Normalize
//
@import "normalize";

//
// @Fonts
//
@import "fonts/icomoon";

//
// @BaseStyles
//
@import "base/resets";
@import "base/animate";
@import "base/typography";
@import "base/utility";
@import "base/links_and_controls";

//
// @Modules
//
@import "modules/preloader";
@import "modules/header";
@import "modules/footer";

//
// @Views
//
@import "views/common";
@import "views/index";
@import "views/schedule";
@import "views/news";
@import "views/news_detail";
@import "views/gallery";
@import "views/gallery_detail";
@import "views/teams";
@import "views/kyle";
@import "views/partners";

答案 1 :(得分:1)

你需要为此使用concat插件,并首先将所有scss文件连接到一个master.scss中,之后你可以使用sass插件将sass代码编译成css。

function writeftif(outim,outfilename)
t = Tiff(outfilename,'w');
if size(outim,3)==3
    t.setTag('Photometric',Tiff.Photometric.RGB);
elseif size(outim,3)==1
    t.setTag('Photometric',Tiff.Photometric.MinIsBlack);
end
t.setTag('Compression',Tiff.Compression.None);
t.setTag('BitsPerSample',32);
t.setTag('SamplesPerPixel',size(outim,3));
t.setTag('SampleFormat',Tiff.SampleFormat.IEEEFP);
t.setTag('ImageLength',size(outim,1));
t.setTag('ImageWidth',size(outim,2));
t.setTag('PlanarConfiguration',Tiff.PlanarConfiguration.Chunky);
% Write the data to the Tiff object.
t.write(single(outim));
t.close();