그란트 (Grunt) 및 시작 (부분) 시작하기

Question

그랑트를 시작하기 시작한 것이므로 일부 grassfile.js를 구성하여 sass 부분 파일의 변경 사항을 인식하는 방법에 대해 혼란스러워합니다. 나는 크리스 코 이어 (Chris Coyier)의 24ways.org에 관한 기사를 읽고 기초에 대해 매우 편안하게 느낀다. grunt watch를 실행할 때, 나는 내 style.scss 파일과 grunt를 변경하여 변경 사항을보고 컴파일 할 수 있습니다. 그러나, 나는 일반적으로 @imports의 긴 목록으로 style.scss를 사용

@import 'partials/partialfilename';

난 아무것도 발견하지 않습니다 내 파셜의 꿀꿀 거리는 소리의 범위의 변경 변경하고, 따라서 아무것도 컴파일되지 않은 경우.

내 프로젝트 디렉토리 내에 style.scss 파일과 partials 디렉토리가 많이 포함 된 sass 디렉토리가 있습니다. 여기

내 툴툴 거리는 소리 파일입니다

module.exports = function(grunt) { 

// 1. All configuration goes here 
grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 

    concat: { 
     dist: { 
      src: [ 
       'js/custom.js', 
       'js/foundation.js', 
       'js/jquery.listnav.js', 
       'js/jquery.ioslider.min.js' 
      ], 
      dest: 'js/build-scripts.js', 
     } 
    }, 

    uglify: { 
     build: { 
      src: 'js/build-scripts.js', 
      dest: 'js/build-scripts-min.js' 
     } 
    }, 

    imagemin: { 
     dynamic: { 
      files: [{ 
       expand: true, 
       cwd: 'images/', 
       src: ['**/*.{png,jpg,gif}'], 
       dest: 'images/' 
      }] 
     } 
    }, 

    sass: { 
     dist: { 
      options: { 
       style: 'compressed' 
      }, 
      files: { 
       'style.css': 'sass/style.scss' 
      } 
     } 
    }, 

    watch: { 
     options: { 
      livereload: true, 
     }, 
     scripts: { 
      files: ['js/*.js'], 
      tasks: ['concat', 'uglify'], 
      options: { 
       spawn: false, 
      } 
     }, 
     css: { 
      files: ['sass/**/*.scss'], 
      tasks: ['sass'], 
      options: { 
       spawn: false, 
      } 
     }, 

     images: { 
      files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'], 
      tasks: ['imagemin'], 
      options: { 
       spawn: false, 
      } 
     } 

    } 



}); 

// 3. Where we tell Grunt we plan to use this plug-in. 
grunt.loadNpmTasks('grunt-contrib-concat'); 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.loadNpmTasks('grunt-contrib-imagemin'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-sass'); 

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal. 
grunt.registerTask('default', ['watch', 'concat', 'uglify', 'imagemin', 'sass']); 

};

내가 같은 시계 CSS의 인수에 대한 몇 가지 다른 옵션 시도 :

css: { 
    files: ['sass/**/*.scss'], 
    tasks: ['sass'], 
    options: { 
    spawn: false 
    } 
} 

및

css: { 
    files: ['sass/*.scss'], 
    tasks: ['sass'], 
    options: { 
    spawn: false 
    } 
} 

내가 할 수 여기에 '요점'수 있다는 것을 깨닫게을, 내가 읽고 내 생각에 대부분의 사람들이 나 자신의 프로젝트에서 나침반을 사용하고 있음을 발견했습니다. "(무시할 수없는)

그럼 다시 질문하겠습니다. 어떻게하면 저음 부분의 변화를보고 컴파일하고 올바르게 CSS를 컴파일 할 수 있습니까?

Answer 1

해결책을 찾았습니다.

css: { 
    files: ['sass/*.scss'], 
    files: ['sass/partials/*.scss'], 
    tasks: ['sass'], 
    options: { 
    spawn: false, 
    } 
}