2016-04-28 252 views
1

這是我第一次使用grunt & npm。Grunt concat所有package.json依賴關係

我的package.json包含此:

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

有沒有辦法告訴咕嚕:「你看我所有的依賴,加載正確的文件,並創建一個JS文件,一個爲CSS文件分配」?

*這是因爲我不想列出每個依賴關係的所有分發文件。

回答

1

是的,你可以使用咕嚕模塊,如:CONCAT,cssmin和上海社會科學院,爲CONCAT您的文件,在短短1

我會盡量給一個小的解釋,但你可以閱讀更多瞭解使用的鏈接。

的concat: 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

: 插入此依賴關係:

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

。 JS插入這些塊波紋管:

負載的任務:

var tasks = [ 


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

    ]; 

對CSS分鐘:

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

爲的毗連:

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

我希望這對你有所幫助。