Question

我有一个繁琐的任务，将我的所有javascript文件连接并缩小为一个文件，javascript文件位于dist文件夹中。 “dist /＆lt;％= pkg.name％＆gt; .min.js'”

“Gruntfile.js”

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: ['src/main/resources/app/js/**/*.js',
                    'src/main/resources/app/config/*.js',
                    'src/main/resources/app/app/js'],
                dest: 'dist/<%= pkg.name %>.js'
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            },
            dist: {
                files: {
                    'src/main/resources/app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask("default", ["concat", "uglify"]);
};

现在，我如何使用javscript的这个缩小版本？此外，我的代码的index.html入口点指向非缩小版本。

“的index.html”

<div ui-view/>
<script data-main="config/require-conf" src="vendor/requirejs/require.js"></script>

Answer 1

您可以使用https://www.npmjs.com/package/grunt-usemin中的usemin。使用minmin，其他任务为

的concat
丑化
cssmin
filerev

能够在一个文件中缩小所有js和css。你只需要添加一个build：js，你可以在下面的代码片段中看到：

＆＃13;

<!-- build:js SCLogic.min.js -->
        <!-- Load app main script -->
        <script src="app/app.js"></script>
        <!-- Load services -->
        <script src="app/services/authInterceptorService.js"></script>
        <script src="app/services/authService.js"></script>
        <script src="app/services/blablaService.js"></script>
       

        <!-- Load controllers -->
        <script src="app/controllers/indexController.js"></script>
        <script src="app/controllers/homeController.js"></script>
        <script src="app/controllers/loginController.js"></script>
        <script src="app/controllers/blablaController.js"></script>
        
        <script src="app/directives/validNumber.js"></script>
       
        <script src="app/controllers/angular-locale_es-es.js"></script>
       
        <!-- endbuild -->

＆＃13;

Answer 2

您可以正常方式包含js文件。

<script src="path to the minified file"></script>

在index.html中

。缩小文件就像普通的JS文件一样。它的作用是：

它会将所有提到的JS文件合并为一个文件。
然后它将缩小它，即它将删除空格并自动更改变量名称。
这样做的好处是您可以使用较小的文件和浏览器生成的单个http请求，这将有助于您以更快的速度加载页面。

如何使用缩小的JavaScript？

2 个答案: