如何使用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一起。