Gruntjs 如何使用grunt将所有.js文件编译成一个小型文件？

我是grunt的新手，我需要一些帮助来设置它。我想使用SASS、Compass并将我所有的.js文件编译成一个小型文件

我正在工作的站点目前没有使用grunt，我想将其设置为使用grunt。所有my.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>

My package.json如下所示：

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']);
}

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

<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脚手架

在项目中单独使用

grunt usemin

，看起来像这样：

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']);
}

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

<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任务来为您进行构建，这将非常特定于您的设置。只需跟着。

这看起来就是我要找的。在你的例子中，我不需要在页面上包含

js/min/app.min.js

？配置将此文件显示为目标文件，将包含的文件显示为源文件，因此我看不出需要在页面上同时包含哪些内容。抱歉，如果我在这里遗漏了一些明显的内容。Usemin会在新的输出html文件中添加一个带有src

js/min/app.min.js

的脚本来代替Usemin块。