如何使用grunt將所有.js文件編譯成一個縮小文件？

Question

我是新來的咕嚕，我需要一些幫助設置它。我想使用SASS，Compass並將所有.js文件編譯成一個縮小文件。

我正在使用的網站目前沒有使用grunt，我想設置它來使用它。我所有的.js文件都包含在頁面的底部。我需要做些什麼來改變它，以便只有一個縮小的.js文件包含所有的.js文件？

在我的索引頁面的底部我已經包含.js文件，像這樣：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script> 
<script src="//code.angularjs.org/1.3.4/angular-sanitize.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> 
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script> 
<script src="bower_components/angular-promise-tracker/promise-tracker.js"></script> 
<script src="bower_components/angular-promise-tracker/promise-tracker-http-interceptor.js"></script> 
<script src="js/config.json" type="application/json"></script> 
<script src="js/infinite-scroll.js"></script> 
<script src="js/hotels.js"></script> 
<script src="js/weather.js"></script> 
<script src="js/main.js"></script> 

我Gruntfile.js看起來是這樣的：

module.exports = function(grunt) { 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 

     minified : { 
      files: { 
      src: [ 
       '/js/src/**/*.js',     
       '/js/src/*.js' 
      ], 
      dest: '/js/min/' 
      } 
     },  

     compass: { 
      dist: { 
       options: { 
        sassDir: 'sass', 
        cssDir: 'css' 
       } 
      } 
     }, 

     watch: { 
      css: { 
       files: '**/*.scss', 
       tasks: ['compass'] 
      } 
     } 
    }); 
    grunt.loadNpmTasks('grunt-contrib-compass'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-minified'); 
    grunt.registerTask('default',['watch']); 
} 

我的package.json看起來是這樣的：

{ 
    "name": "hoteldemo", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "test" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "grunt": "^0.4.5", 
    "grunt-contrib-compass": "^1.0.3", 
    "grunt-contrib-sass": "^0.9.2", 
    "grunt-contrib-watch": "^0.6.1" 
    } 
} 

Answer 1

您可能會想要使用類似grunt-usemin。您甚至可以花時間去探索由Yeoman提供的一些發電機，因爲這些發電機通常會根據您使用的技術爲您提供適當的咕嚕腳手架。

在項目中使用grunt-usemin單獨將是這個樣子：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script> 
<script src="//code.angularjs.org/1.3.4/angular-sanitize.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 


<!-- build:js js/min/app.min.js --> 
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> 
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script> 
<script src="bower_components/angular-promise-tracker/promise-tracker.js"></script> 
<script src="bower_components/angular-promise-tracker/promise-tracker-http-interceptor.js"></script> 
<script src="js/config.json" type="application/json"></script> 
<script src="js/infinite-scroll.js"></script> 
<script src="js/hotels.js"></script> 
<script src="js/weather.js"></script> 
<script src="js/main.js"></script> 
<!-- endbuild --> 

你必須配置一個咕嚕任務做構建你這將是非常具體的，以您的設置。只需跟着grunt-usemin documentation一起。