grunt-contrib-watch + sass: come specificare i file di destinazione?

Question

Ho questo flusso di lavoro:

module.exports = function(grunt) { 

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 

    grunt.initConfig({ 
    sass: { 
     options: { 
     sourceMap: true 
     }, 
     dist: { 
     } 
    }, 
    watch: { 
     files: ['src/*.scss'], 
     tasks: ['sass'] 
    } 
    }); 

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

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

}; 

Dopo aver eseguito grunt watch e cambiare un file src/*.scss, ottengo questo:

File "src/main.scss" cambiato. Running "sass: dist" (sass) compito

Done, senza errori. Completato nel 0.949s a Fri 2 Feb 2016 11:25:11 GMT + 0100 (CET) - Waiting ...

Il mio problema: dove si trova il file generato? come specificare il file di destinazione?

ho anche provato con questo flusso di lavoro:

module.exports = function(grunt) { 

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 

    grunt.initConfig({ 
    sass: { 
     options: { 
     sourceMap: true 
     }, 
     dist: { 
      files: [{ 
      expand: true, 
      cwd: 'src', 
      src: ['*.scss'], 
      dest: '.', 
      ext: '.css' 
      }] 
     } 
    }, 
    watch: { 
     files: ['*.scss'], 
     tasks: ['sass'] 
    } 
    }); 

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

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

}; 

e funzionante anche grunt watch, ma quando cambio src/*.scss non succede nulla ..

EDIT: questo è il mio file di grugnito dopo le risposte :

module.exports = function(grunt) { 

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 

    grunt.initConfig({ 
    sass: { 
     options: { 
     sourceMap: true 
     }, 
     dist: { 
      files: [{ 
      expand: true, 
      cwd: '.', 
      src: ['src/**/*.scss'], 
      dest: '.', 
      ext: '.css' 
      }] 
     } 
    }, 
    watch: { 
     files: ['src/**/*.scss'], 
     tasks: ['sass'] 
    } 
    }); 

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

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

}; 

Answer 1

Supponiamo di avere un file main.scss e quello @import da _sassfile.scss in una cartella layout. Suona bene?

sass: { 
    options: { 
     sourceMap: true, 
     outFile: 'dist/main.css.map' // so you get a sourceMap file 
    }, 
    dist: { 
     files: { 
     'dist/main.css' : 'src/main.scss' 
     } 
    } 
    }, 
    watch: { 
    files: ['src/layout/*.scss'], 
    tasks: ['sass'] 
    } 

Ciò significa grunt watch controllerà per i cambiamenti nei file singolo componente sass/SCSS, allora verrà eseguito il compito sass, che elabora tutto fuori per dist/main.css.

Se si sta usando solo 1 file di Sass, cioè, main.scss è il vostro unico file, o se avete deciso di mettere ulteriori _partial.scss file Sass nella stessa directory, è possibile mantenere il comando watch come

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

Ultima cosa.Lo cwd per i file Sass, src/ non verrà trasferito allo files specificato per watch. Quindi il tuo Gruntfile stava cercando file cambia una directory sopra src/ nel secondo flusso di lavoro.

Answer 2

È necessario specificare un'uscita:

module.exports = function(grunt) { 

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks 

    grunt.initConfig({ 
    sass: { 
    options: { 
     sourceMap: true 
    }, 
    dist: { 
     files: { 
     //output added here 
     'dist/main.css' : 'src/*.scss' 
     } 
    } 
    }, 
    watch: { 
    files: ['src/*.scss'], 
    tasks: ['sass'] 
    } 
    }); 

    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.registerTask('default', ["sass"]); 
}; 

Nota grunt-sass dovrebbe sostenere tutte le standard configuration options troppo.

Con la configurazione originale, l'attività è stata eseguita correttamente ma non ha trovato alcun file da elaborare. Se corro con grunt --debug --verbose ottengo:

[D] Task source: /Users/edeustace/dev/github/edeustace/stack-overflow-questions/grunt-watch/node_modules/grunt-sass/tasks/sass.js 

Running "sass:dist" (sass) task 
[D] Task source: /Users/edeustace/dev/github/edeustace/stack-overflow-questions/grunt-watch/node_modules/grunt-sass/tasks/sass.js 
Verifying property sass.dist exists in config...OK 
File: [no files] 

Credo che si potrebbe considerare questo un bug in grunt-sass.

Answer 3

Il motivo per cui grunt watch non viene attivato nella configurazione del secondo task grunt nella domanda è a causa del percorso file errato visualizzato.

watch: { 
    files: ['*.scss'], 
    tasks: ['sass'] 
} 

Questo guarda solo tutti i file .scss presenti nella root del progetto (non in una cartella qualsiasi, come src). Sarà necessario impostare il percorso files per la vigilanza stessa della prima configurazione del task grugnito nella tua domanda e dovrebbe funzionare

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

Nota: Nel caso in cui non ci sono sottocartella sotto src cartella contenente .scss file, quindi si avrà cambiare il modello di src/**/*.scss in files gamma di orologio e di src: ['**/*.scss'] in files oggetto di sass

anche nella configurazione 2 ° grugnito, dell'oggetto filesdest opt ion for sass task è impostato su .. Questo genera i file CSS nella radice del progetto. Per generare al loro interno src o altre cartelle, specificare di conseguenza

È possibile controllare l'esempio di lavoro a https://github.com/pra85/grunt-sass-example (Controllare il ramo subfolder per la gestione di casi di cartelle nidificate in src contenenti file SASS)