Question

我想使用grunt-contrib-watch来查看我的.scss文件，编译它们然后将它们连接起来。现在，因为我正在查看.scss和.css个文件，我.scss个文件的更改将启动任务，然后.css更改重新启动任务，并且卡在环。如何在“sass”之后订购“concat”的任务？

module.exports = function（grunt）{

grunt.initConfig ({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        css: {
            src: ['src/css/reset.css', 'src/css/syntax.css', 'src/css/main.css'],
            dest: 'dest/css/built.css'
        }
    },
    sass : {
        dist: {
            files: {
                'src/css/main.css' : 'src/css/main.scss'
            }
        }
    },
    watch : {
        files: ['src/css/*.scss', 'src/css/*.css'],
        tasks: ['sass', 'concat'],
        options: {}
    }
});

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

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

};

Answer 1

//在生成任何新文件之前，删除之前创建的任何文件 -
grunt.loadTasks（ '咕噜-的contrib清洁'）;

`clean: {
            test: [
                'tmp',
                '.sass-cache'
            ]
        },

//要运行的配置（然后进行测试） grunt.loadTasks（ 'node_modules /咕噜-的contrib罗盘/任务'）;

`compass: {
        dist: {                   // Target
                options: {              // Target options
                    sassDir: '',
            },
            dev: {                   // Target
                options: {              // Target options
                    sassDir: '',
            }
       }`

// cssmin压缩＆amp;结合CSS文件
grunt.loadTasks（ 'node_modules /咕噜-的contrib-cssmin /任务'）;

cssmin: {
        compress: {
            files: {
                '<%= project.css %>/main_combined.css': [
                    '<%= project.css %>/tv-carousels.css',
                    '<%= project.css %>/tv-global.css']
                   }
                 }
        }

然后添加手表 grunt.loadTasks（ '咕噜-的contrib手表'）;

Answer 2

在阅读帖子http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/之前，我有同样的问题试试这个

grunt.initConfig ({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        css: {
            src: ['src/css/reset.css', 'src/css/syntax.css', 'src/css/main.css'],
            dest: 'dest/css/built.css'
        }
    },
    sass : {
        dist: {
            files: {
                'src/css/main.css' : 'src/css/main.scss'
            }
        }
    },
    watch : 
        css:{
            files: ['src/css/*.scss'],
            tasks: ['buildcss']
        }
    }
});

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

grunt.registerTask('buildcss', ['sass', 'concat']);

然后运行grunt watch

使用grunt-contrib-watch在使用sass编译后汇编css文件

2 个答案: