Verschiedene Grunt Aufgaben für Watch und Sass

Question

Ich habe ein Grunt-Projekt und ich verwende Sass und Jade zusammen. Ich möchte eine Aufgabe für Hass haben, wenn ich entwickle, wo der Stil für die Fehlersuche erweitert wird, und eine Aufgabe, wenn ich das Projekt "beende" und dann der Stil komprimiert wird. Ich bin neu zu grunzen und weiß nicht, wie ich es machen soll.

Mein gruntfile

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

     jade: { 
      compile: { 
       options: { 
        pretty: true, 
        nospawn: false 
       }, 

       files: { 
        'index.html' : 'src/index.jade' 
       } 
      } 
     }, 

     sass: { 
      dist: { 
       options: { 
        style: 'expanded', 
        nospawn: false 
       }, 

       files: { 
        'build/css/app.css' : 'src/sass/app.sass' 
       } 
      } 
     }, 

     watch: { 
      jade: { 
       files: 'src/**/*.jade', 
       tasks: ['jade'] 
      }, 

      css: { 
       files: 'src/sass/**/*.sass', 
       tasks: ['sass'] 
      }, 

      options: { 
       livereload: true, 
       nospawn: false 
      } 
     }, 

     connect: { 
      server: { 
       options: { 
        port: 9000, 
        base: '.', 
        hostname: '0.0.0.0', 
        protocol: 'http', 
        livereload: true, 
        open: true 
       } 
      } 
     } 
    }); 

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

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

Answer 1

CSS komprimiert zu bekommen statt erweitert, würden Sie zuerst einen anderen Sass-Aufgabe machen müssen (so innerhalb sass:{}), nennen es finish: zum Beispiel und die Einstellung Kompression ändern.

Es sollte wie folgt aussehen:

finish: { 
    options: { 
      style: 'compressed', 
      nospawn: false 
      }, 

    files: { 
      'build/css/app.css' : 'src/sass/app.sass' 
      } 
} 

Dann nach grunt.registerTask('default', ['connect', 'watch']); können Sie eine weitere Aufgabe hinzufügen, dh fertig stellen, die sollte: grunt.registerTask('finish', ['sass:finish']);

Um es auszuführen, würden Sie grunt finish in der Befehlszeile eingeben.