如何通过grunt-contrib-uglify按顺序缩小js文件？

Question

我有一个如下目录:

/folder/b.js
/folder/jQuery.js
/folder/a.js
/folder/sub/c.js

我想按顺序在一个js文件中缩小所有这些js文件:

jQuery.js - > a.js - > b.js - > c.js

问:
1.如何通过grunt-contrib-uglify来实现？(实际上,有很多文件,单独指定所有源文件路径是不切实际的)

2.btw,如何在调试时获取未经文明化的文件,并在发布时获得缩小的单个文件,而无需更改html中的脚本标记(以及如何编写脚本标记)？

Answer 1

好问题!

1)Uglify将重新排序目标文件中的函数,以便函数定义位于顶部,函数执行在底部,但似乎它将保留函数执行的顺序.

这意味着如果确保在Gruntfile中的Uglify配置中首先提到jQuery,那么jQuery运行以定义其全局函数的函数将首先放置.

我用这个配置:

uglify: {
    options: {
        sourceMap: true
    },
    build: {
        files: {
            'public/all.min.js': ['public/js/vendor/jquery-1.10.2.min.js', 'public/js/*.js'],
        }
    }
}

2)我认为没有一种明确的方法可以实现这一目标.这取决于您的Web框架,模板框架和您有哪些要求.我使用express + jade,在我的主要玉器布局中我有:

if process.env.NODE_ENV === 'production'
  script(src='/all.min.js')
else
  script(src='/js/vendor/jquery-1.10.2.min.js')
  script(src='/js/someScript.js')
  script(src='/js/otherScript.js')

在我的package.json中,我有:

"scripts": {
  "postinstall": "grunt"
},

这意味着当我npm install在部署(在Heroku上)运行时,运行grunt以缩小/连接文件,并且当使用NODE_ENV=production缩小的客户端启动应用程序时,使用javascript.在本地,我得到原始客户端javascripts服务,以便于调试.

两个缺点是:

• 我必须保持两个脚本文件列表同步(在Gruntfile和layout.js中)我通过*.js在Gruntfile中使用来解决这个问题,但这可能不适合所有人.您可以将javascripts列表放在Gruntfile中并从中创建一个jade-template,但对于大多数项目来说似乎有些过分.
• 如果您不信任您的Grunt配置,您基本上必须使用NODE_ENV=production本地测试运行应用程序,以验证缩小是否按照您的预期方式工作.

Answer 2

这可以使用以下Grunt任务完成:

1. https://github.com/gruntjs/grunt-contrib-concat连接文件
2. https://github.com/gruntjs/grunt-contrib-uglify缩小连接文件

编辑

我通常使用grunt-contrib-concat通过Grunt连接任务运行我的所有文件.然后我有另一个任务来使用grunt-contrib-uglify来对连接文件进行uglify.

Answer 3

您可能不会喜欢这样,但最好的方法是将您的js源文件定义为AMD模块,并使用Requirejs来管理它们加载的顺序.grunt-contrib-requirejs任务将递归您的依赖关系树并将必要顺序的js文件连接到一个大的js文件中.然后,您将使用uglify(实际上r.js具有内置的uglify)来缩小大文件.

https://github.com/danheberden/yeoman-generator-requirejs有一个很好的示例gruntfile和模板js文件可供使用.

编辑

我最近开始使用CommonJS模块而不是AMD,因为它更接近ES6模块规范.通过Browserify运行commonjs模块,您可以获得相同的结果(1个大的编译+连接的js文件).有gulnt和gulp插件可以为您管理任务.

编辑

我想补充一点,如果您的网站是使用ES6编写的,那么Rollup是最好的新连接软件包.除了捆绑您的文件外,它还会执行树摇动,删除您使用的部分库(如果通过import语句包含).这样可以将您的代码库减少到您所需要的代码库,而无需您永远不会使用的大量代码.

Answer 4

我不认为你可以单独使用uglify任务来做到这一点,但是你有很多选择可能会导致你想要的结果.

一个可能的工作流程是首先将文件连接(grunt-contrib-concat)按顺序连接到一个文件中,然后通过uglify放入这个连接文件.您可以在Gruntfile中定义concat的顺序,也可以使用这些插件:

第一个是https://github.com/yeoman/grunt-usemin,您可以在其中指定HTML文件中的顺序,在脚本块周围添加一些注释.谷歌人做了它,使用起来非常好.

第二个是https://github.com/trek/grunt-neuter,您可以在其中使用require定义一些依赖项,但不需要大量的require.js.它需要更改JS代码,因此可能不喜欢它.我会选择一个.