grunt-contrib-watch + sass: cách chỉ định tệp đích?

Question

Tôi có công việc này:

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"]); 

}; 

Sau khi chạy grunt watch và thay đổi một tập tin src/*.scss, tôi có được điều này:

File "src/main.scss" thay đổi. Chạy tác vụ "sass: dist" (sass)

Xong, không có lỗi. Hoàn thành trong 0,949 tại Tue Feb 02 2016 11:25:11 GMT + 0100 (CET) - Đang chờ ...

Vấn đề của tôi: tệp được tạo ở đâu? làm cách nào để chỉ định tệp đích?

Tôi cũng đã cố gắng sử dụng nó workflow này:

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"]); 

}; 

và chạy cũng grunt watch, nhưng khi tôi thay đổi src/*.scss có gì xảy ra ..

EDIT: đây là tập tin grunt của tôi sau khi câu trả lời :

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

Giả sử bạn có tệp main.scss và rằng @import từ _sassfile.scss trong thư mục layout. Nghe hay đấy?

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'] 
    } 

Điều này có nghĩa grunt watch sẽ giám sát những thay đổi trong các tập tin cá nhân phần sass/SCSS, sau đó nó sẽ chạy các nhiệm vụ sass, mà sẽ xử lý tất cả mọi thứ ra dist/main.css.

Nếu bạn chỉ sử dụng 1 tập tin Sass, có nghĩa là, main.scss là tập tin duy nhất của bạn, hoặc nếu bạn đang đặt thêm _partial.scss file Sass trong cùng thư mục, bạn có thể giữ lệnh đồng hồ của bạn như

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

Điều cuối cùng.cwd cho các tệp Sass của bạn, src/ sẽ không chuyển sang số files mà bạn chỉ định cho watch. Vì vậy, Gruntfile của bạn đang tìm kiếm tập tin thay đổi một thư mục trên src/ trong quy trình làm việc thứ hai.

Answer 2

Bạn cần chỉ định đầu ra:

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"]); 
}; 

Note grunt-sass nên hỗ trợ tất cả các standard configuration options quá.

Với cấu hình ban đầu của bạn, tác vụ đã chạy thành công nhưng không tìm thấy bất kỳ tệp nào để xử lý. Nếu tôi chạy với grunt --debug --verbose tôi nhận được:

[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] 

Tôi đoán bạn có thể coi đây là một lỗi trong grunt-sass.

Answer 3

Lý do tại sao grunt watch không kích hoạt trong cấu hình tác vụ grunt thứ 2 trong câu hỏi của bạn là do đường dẫn tệp sai được xem.

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

này chỉ giám sát mọi .scss file có trong thư mục gốc của dự án (không phải bên trong bất kỳ thư mục như src). Bạn sẽ cần phải thiết lập đường dẫn files cho chiếc đồng hồ tương tự như cấu hình nhiệm vụ grunt 1 trong câu hỏi của bạn và nó sẽ làm việc

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

Lưu ý: Trong trường hợp có những thư mục con dưới src thư mục chứa .scss file, sau đó bạn sẽ phải thay đổi mô hình để src/**/*.scss trong files mảng đồng hồ và để src: ['**/*.scss'] trong đối tượng files sass của

Cũng trong cấu hình grunt 2, files đối tượng của dest opt ion cho nhiệm vụ sass được đặt thành .. Điều này tạo ra các tệp CSS ở gốc của dự án. Để tạo ra chúng trong src hoặc thư mục khác, xác định phù hợp

Bạn có thể kiểm tra ví dụ làm việc tại https://github.com/pra85/grunt-sass-example (Kiểm tra các chi nhánh subfolder để xử lý trường hợp các thư mục lồng nhau trong src chứa file Sass)