Yeoman과 백그라운드에서 연속 CSS 연결

Question

Yeoman을 사용하고 있으며 파일이 변경되면 CSS task을 트리거 할 수있는 방법을 찾을 수 없습니다.

나는

 
\ app 
    -----\ module1 
     ------- style.css 
    -----\ module2 
     ------- style.css 
    -----\ module3 
     ------- style.css 
    -----\ styles 
     ------- main.css 

같은 프로젝트 구조를하고 난 모듈 내의 모든 CSS 파일을 볼

• 에 보좌관을하고 싶습니다;
• CSS 연결/축소 작업을 트리거합니다.
• 덮어 쓰기 app/styles/main.css.

은 여기 내 Gruntfile.js :

module.exports = function(grunt) { 
    'use strict'; 
    // 
    // Grunt configuration: 
    // 
    // https://github.com/cowboy/grunt/blob/master/docs/getting_started.md 
    // 
    grunt.initConfig({ 

    // Project configuration 
    // --------------------- 

    // specify an alternate install location for Bower 
    bower: { 
     dir: 'app/components' 
    }, 

    // Coffee to JS compilation 
    coffee: { 
     compile: { 
     files: { 
      // 'app/scripts/*.js': 'app/scripts/**/*.coffee', 
      // 'test/spec/*.js': 'test/spec/**/*.coffee' 
     } 
     } 
    }, 

    // compile .scss/.sass to .css using Compass 
    compass: { 
     dist: {} 
    }, 

    // default watch configuration 
    watch: { 
     reload: { 
     files: [ 
      'Gruntfile.js', 
      'app/*.html', 
      'app/styles/**/*.css', 
      'app/scripts/**/*.js', 
      'app/images/**/*', 
      'app/app/**/*' 
     ], 
     tasks: 'css reload' 
     } 
    }, 

    // default lint configuration, change this to match your setup: 
    // https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#lint-built-in-task 
    lint: { 
     files: [ 
     'Gruntfile.js', 
     'app/scripts/**/*.js', 
     'spec/**/*.js' 
     ] 
    }, 

    // specifying JSHint options and globals 
    // https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#specifying-jshint-options-and-globals 
    jshint: { 
     options: { 
     curly: true, 
     eqeqeq: true, 
     immed: true, 
     latedef: true, 
     newcap: true, 
     noarg: true, 
     sub: true, 
     undef: true, 
     boss: true, 
     eqnull: true, 
     browser: true 
     }, 
     globals: { 
     angular: true 
     } 
    }, 

    // Build configuration 
    // ------------------- 

    // the staging directory used during the process 
    staging: 'temp', 

    // final build output 
    output: 'dist', 

    mkdirs: { 
     staging: 'app/' 
    }, 

    // Below, all paths are relative to the staging directory, which is a copy 
    // of the app/ directory. Any .gitignore, .ignore and .buildignore file 
    // that might appear in the app/ tree are used to ignore these values 
    // during the copy process. 

    // concat css/**/*.css files, inline @import, output a single minified css 
    css: { 
     'app/styles/main.css': ['app/styles/*.css', 'app/app/**/*.css'] 
    }, 

    // renames JS/CSS to prepend a hash of their contents for easier 
    // versioning 
    rev: { 
     js: 'scripts/**/*.js', 
     css: 'styles/**/*.css', 
     img: 'images/**' 
    }, 

    // usemin handler should point to the file containing 
    // the usemin blocks to be parsed 
    'usemin-handler': { 
     html: 'index.html' 
    }, 

    // update references in HTML/CSS to revved files 
    usemin: { 
     html: ['**/*.html'], 
     css: ['**/*.css'] 
    }, 

    // HTML minification 
    html: { 
     files: ['**/*.html'] 
    }, 

    // Optimizes JPGs and PNGs (with jpegtran & optipng) 
    img: { 
     dist: '<config:rev.img>' 
    }, 

    // rjs configuration. You don't necessarily need to specify the typical 
    // `path` configuration, the rjs task will parse these values from your 
    // main module, using http://requirejs.org/docs/optimization.html#mainConfigFile 
    // 
    // name/out/mainConfig file should be used. You can let it blank if 
    // you're using usemin-handler to parse rjs config from markup (default 
    // setup) 
    rjs: { 
     // no minification, is done by the min task 
     optimize: 'none', 
     baseUrl: './scripts', 
     wrap: true 
    } 
    }); 

    // Alias the `test` task to run `testacular` instead 
    grunt.registerTask('test', 'run the testacular test driver', function() { 
    var done = this.async(); 
    require('child_process').exec('testacular start --single-run', function (err, stdout) { 
     grunt.log.write(stdout); 
     done(err); 
    }); 
    }); 
}; 

Answer 1

나는 꿀꿀 거리는 소리에 새로운 오전,하지만 내가 정의 시계 작업을 작성했던 것은이 있었다. 처음에는 내가 개발하는 동안 실행하고 싶은 것만 포함하는 새로운 작업을 등록했습니다. 예를 들어, 내 프로젝트가 unminified j에 대해 실행되기를 원합니다. 그래서 나는 최소 또는 병행 작업이 실행되도록 요구하지 않습니다. 그냥 lint 그들을 테스트하고 grunt-targethtml을 사용하여 개발 모드에 대한 HTML을 다시 작성하십시오.

grunt.registerTask('devel', 'lint qunit targethtml'); 

는 다음 나는 보풀이 작업에 정의 된 devel 작업

watch: { 
     files: '<config:lint.files>', 
     tasks: 'devel' 
    } 

이 파일 목록을 사용을 실행하는 데 기본을 watch 구성을 대체하지만 당신은

와 이것을 대체 할 수 있어야한다

 files: ['app/**/*.css']