2017-06-13 6 views
0

私は、CSSマージと縮小のプロセスを自動化するためにグランツを実装しようとしています。マイフォルダ構造:ループ実行中のタスク(saas、cssmin)

のfolder1
- SASS
- CSS

フォルダ2
- SASS
- CSS

FOLDER3
- SASS
- CSS

フォルダ4
- SASS
- CSS

要件:それは日食からファイルを保存でトリガされたときに個別、面倒な作業は、各プロジェクトで正常に動作しています。しかし、私が望むのは、gruntコマンドを発行することですべてのフォルダの縮小プロセスを実行することです。つまり、cmdに "grunt"と入力すると、フォルダごとにループして、それぞれに縮小されたCSSを生成する必要があります。現在、initconfigがループ内にあるので、各反復で最後のフォルダのcssを生成しています。 (のみ関連するコードを運ぶ)Gruntfile.jsの

簡易版:すべてのヘルプは高く評価されるであろう

module.exports = function(grunt) { 

    var tasks = [ 
     'grunt-contrib-cssmin','grunt-sass' 
    ]; 

    tasks.forEach(function (task) { 
     grunt.loadNpmTasks(task); 
    }); 

    var folder =['folder1', 'folder2', 'folder3', 'folder4']; 

    var source; 
    var csspath; 
    var destination; 

    for (var i = 0; i < folder.length; i ++) {   

      source=folder[i] + '/sass/*.scss'; 
      csspath=folder[i] + '/css/'; 
      destination=csspath + 'combined-styles.css'; 



      grunt.initConfig({ 

       config: { 
        destination: destination 
       }, 
       sass: { 
        dist: { 
         files: { 
         '<%= config.destination %>' : [source] 
         } 
        }, 
       }, 
       cssmin: { 
        target: { 
        files: [{ 
         expand: true, 
         cwd: csspath, 
         src: ['combined-styles.css'], 
         dest: csspath, 
         ext: '.min.css' 
        }] 
        } 
       } 

      }); 

     grunt.task.registerTask(folder[i], ['sass','cssmin']); 
    } 

    grunt.task.registerTask('default', folder); 


}; 

、ありがとう。

答えて

0

問題を修正できました。

  1. 初期化SASSとcssmin配列
  2.   files: [{ 
           expand: true, 
           cwd: scsspath, 
           src: [source], 
           dest: csspath, 
           ext: '.css' 
          }] 
    
(cssminに類似)

  files: { 
        '<%= config.destination %>' : [source] 
        } 

から私のSASSのタスクの設定を変更:以下は手順です grunt.config.setを用いてそれぞれSASSするSASSとcssminアレイとcssminタスクを割り当てられた各フォルダ

  • の配列SASSとcssminに

  • 付加価値:

    イサキ。 config.set( "sass"、sass);

    grunt.config.set( "cssmin"、cssmin);

  • 登録タスク "SASS" と "cssmin"

    grunt.task.registerTask( 'デフォルト'、[ 'SASS'、 'cssmin']);

  • 正しいGruntfile.js:

    module.exports = function(grunt) { 
    
        var tasks = [ 
         'grunt-contrib-cssmin','grunt-sass' 
        ]; 
    
        tasks.forEach(function (task) { 
         grunt.loadNpmTasks(task); 
        }); 
    
        var folder =['folder1', 'folder2', 'folder3', 'folder4']; 
    
        var source,csspath,scsspath; 
    
        var sass={}; 
        var cssmin={}; 
    
        for (var i = 0; i < folder.length; i ++) {   
    
          scsspath=folder[i] + '/sass/'; 
          source='*.scss'; 
          csspath=folder[i] + '/css/'; 
    
          sass["folder"+i]= { 
           files: [{ 
            expand: true, 
            cwd: scsspath, 
            src: [source], 
            dest: csspath, 
            ext: '.css' 
           }] 
          }; 
    
          cssmin["folder"+i]= { 
           files: [{ 
            expand: true, 
            cwd: csspath, 
            src: ['combined-styles.css'], 
            dest: csspath, 
            ext: '.min.css' 
           }] 
          }; 
    
        } 
    
        grunt.config.set("sass", sass); 
        grunt.config.set("cssmin", cssmin); 
    
        grunt.task.registerTask('default', ['sass','cssmin']); 
    
    
    }; 
    
    関連する問題