2016-04-28 15 views
1

私はgrunt & npmを初めて使用します。grunt concatすべてのpackage.json依存関係

"dependencies": { 
    "angular": "latest", 
    "bootstrap": "latest", 
    "jquery": "latest" 
} 

うなり声を伝える方法があります::のための右のファイルをロードし、私の依存関係のすべてを見て」、および1つのJSファイルを作成するには、一つのCSSファイル

私のpackage.jsonは、この含まれてい分布"?

*これは、すべての依存関係のすべての配布ファイルをリストしたくないためです。

答えて

1

はいあなたのようなうなり声モジュールを使用することができます:あなたのファイルは、私は小さな説明を与えるしようとしますが、あなたはより多くを読み、リンクを使用して理解することができますちょうど1

に連結するために、連結、cssmin、およびSASS。

連結: https://www.npmjs.com/package/grunt-contrib-concat

cssmin: https://github.com/gruntjs/grunt-contrib-cssmin

SASS:パッケージJSON上 https://github.com/gruntjs/grunt-contrib-sass

: この依存関係を挿入します。gruntfile上

"grunt-contrib-concat": "*", 
"grunt-contrib-cssmin": "*", 
"grunt-contrib-uglify": "*", 
"grunt-contrib-uglify": "*", 

を。 JS怒鳴るこれらのブロックを挿入します。

負荷タスク:連結方式のため

cssmin: { 
    target: { 
    files: [{ 
     expand: true, 
     cwd: 'release/css', 
     src: ['*.css', '!*.min.css'], 
     dest: 'release/css', 
     ext: '.min.css' 
    }] 
    } 
} 

:uglifyため

  var concat 
      config.concat = concat = {}; 

      concat.dev = { 
       files: { 
        "public/myapp.development.js": [ 
         "with-bootstrap/public/js/vendor" 
         ,"with-bootstrap/public/js/**/*.js" 
        ] 
       } 
      }; 

config.uglify = {dist: { 
       options: {sourceMap:"public/myapp.production.js.map"} 
       ,files: { 
        "public/myapp.production.js": ["public/myapp.development.js"] 
       } 
      }} 
のcss分間

var tasks = [ 


      ,'grunt-contrib-concat' 
      ,'grunt-contrib-uglify' 
      ,'grunt-contrib-sass' 
      ,'grunt-contrib-cssmin' 

    ]; 

を0

私はこれがあなたを助けてくれることを願っています。

関連する問題