2014-09-24 95 views
0

我是Grunt的新人,我無法找到我要找的東西。Grunt可以將特定文件夾中的所有js/css文件合併到一個js/css文件中嗎?

我有這個文件夾的結構配置:

app/ 
public/ 
    assets/ 
     ... some javascript/css libs like jQuery, Bootstrap, etc 
    css/ 
    js/ 
    img/ 

我希望做的是在public/assets/所有js文件壓縮成一個assets.js文件將是js/assets.js,併爲所有的做同樣的在css/assets.css中將css文件轉換爲assets.css

此外,我想這兩個assets.js/css文件被壓縮。

解決方案的鏈接或解決方案的一些開始是我所需要的。

謝謝!

回答

1

首先,您需要連接文件,然後通過縮小器運行它們。 Grunt有很多插件可以完成這些工作,但是一些比較流行的插件是grunt-contrib-concatgrunt-contrib-uglifygrunt-contrib-cssmin

這些任務有很多選項可供選擇,以滿足您的需求,但這應該有助於您開始。

對於concat任務示例配置會是這樣的:

grunt.initConfig({ 
    concat: { 
    options: { 
     separator: ';', 
    }, 
    js: { 
     src: ['public/assets/a.js', 'public/assets/b.js', 'public/assets/c.js'], 
     dest: 'public/js/assets.js', 
    }, 
    js: { 
     src: ['public/assets/a.css', 'public/assets/b.css', 'public/assets/c.css'], 
     dest: 'public/css/assets.css', 
    }, 
    }, 
}); 

然後你縮小JS任務:

uglify: { 
    js: { 
     files: { 
     'public/assets/js/assets.min.js': 'public/assets/js/assets.js' 
     } 
    } 
    } 

最後,CSS縮小任務:

cssmin: { 
    files: { 
    'public/assets/css/assets.min.css' : 'public/assets/css/assets.css' 
    } 
} 
相關問題