Grunt nicht kompilieren Sass zu CSS

Question

Ich kann nicht herausfinden, was ist falsch mit meiner Gruntfile, aber die Art, wie ich es verstehe, ist die sass Aufgabe kompilieren abc.scss zu abc-exp.css, dann cssmin wird abc -exp.css und generieren abc.css. Schließlich läuft die watch Aufgabe, die css Aufgabe, die sass und cssmin enthält. Das genaue CSS wird jedoch nur generiert, wenn ich meine Aufgaben zum ersten Mal ausführe. Bei nachfolgenden Änderungen wird nichts generiert.

Meine Projektstruktur ist:

• _themes/abc/css/abc-exp.css
• _themes/abc/css/abc.css
• _themes/abc/sass/abc.scss
• _themes/abc/Frechheit/partials
• _themes/abc/sass/partials/_base.scss
• _themes/abc/sass/partials/_variables.scss
• _themes/abc/sass/partials/_mixins.scss

Gruntfile:

module.exports = function(grunt){ 

    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); 

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

    sass: { 
     build: { 
     files: { 
      '_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss' 
     } 
     } 
    }, 

    // autoprefixer: { 
    // build: { 
    //  src: '_themes/abc/css/abc-exp.css', 
    //  dest: '_themes/abc/css/abc-exp.css' 
    // } 
    // }, 

    cssmin: { 
     build: { 
     src: '_themes/abc/css/abc-exp.css', 
     dest: '_themes/abc/css/abc.css' 
     } 
    }, 

    // cssbeautifier: { 
    // files: ['_themes/abc/css/abc-exp.css'], 
    // options: { 
    //  indent: ' ', 
    //  openbrace: 'end-of-line', 
    //  autosemicolon: false 
    // } 
    // }, 

    uglify: { 
     options: { 
     }, 
     my_target: { 
     files: { 
      '_themes/abc/js/abc-min.js': ['_themes/abc/js/abc.js'], 
      '_themes/abc/js/abc-bottom-min.js': ['_themes/abc/js/abc-bottom.js'] 
     } 
     } 
    }, 

    watch: { 
     css: { 
     files: ['_themes/abc/sass/*.scss'], 
     tasks: ['css'] 
     }, 
     js: { 
     files: ['_themes/abc/js/abc.js', '_themes/abc/js/abc-bottom.js'], 
     tasks: ['js'] 
     } 
    }, 

    browserSync: { 
     dev: { 
     bsFiles: { 
      src: [ 
      '_themes/abc/css/*.css', 
      '_themes/abc/img/*', 
      '_themes/abc/js/*.js', 
      '_themes/abc/**/*.html', 
      '_themes/abc/**/*.md' 
      ] 
     }, 
     options: { 
      watchTask: true, 
      proxy: 'wifi.dev:8888' 
     } 
     } 
    } 
    }); 

    // grunt.registerTask('default', ['browserSync', 'watch']); 
    // grunt.registerTask('css',  ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']); 
    // grunt.registerTask('buildcss', ['sass', 'autoprefixer', 'cssmin', 'cssbeautifier']); 
    // grunt.registerTask('js',  ['uglify']); 
    // grunt.registerTask('buildjs', ['uglify']); 

    grunt.registerTask('default', ['browserSync', 'watch']); 
    grunt.registerTask('css',  ['sass', 'cssmin']); 
    grunt.registerTask('js',  ['uglify']); 

}; 

Answer 1

Ich glaube, Sie brauchen build mit dist wie folgt ersetzt:

sass: { 
    dist: { 
    files: { 
     '_themes/abc/css/abc-exp.css': '_themes/abc/sass/abc.scss' 
    } 
    } 
}, 

Um zu machen die Aufgabe beobachtbar durch watch müssen Sie es von css zu sass

ändern